From 40cb3b1ae730e2c1d6ae739d4557fde9255c378c Mon Sep 17 00:00:00 2001
From: Reinaldo Neto <47038980+reinaldonetof@users.noreply.github.com>
Date: Tue, 29 Mar 2022 17:06:50 -0300
Subject: [PATCH] Chore: Evaluate UiKit - TypeScript (#3939)

* Chore: Evaluate UiKit - TypeScript

* minor tweak
---
 app/containers/ReactionsModal.tsx             |  2 +-
 app/containers/SearchBox.tsx                  |  6 +-
 app/containers/UIKit/Actions.tsx              |  4 +-
 app/containers/UIKit/DatePicker.tsx           | 14 ++--
 app/containers/UIKit/Image.tsx                | 17 +++--
 app/containers/UIKit/MultiSelect/Chips.tsx    | 15 ++--
 app/containers/UIKit/MultiSelect/Input.tsx    |  4 +-
 app/containers/UIKit/MultiSelect/Items.tsx    | 19 +++--
 app/containers/UIKit/MultiSelect/index.tsx    | 37 +++++++---
 app/containers/UIKit/Overflow.tsx             |  9 ++-
 app/containers/UIKit/Section.tsx              | 19 +++--
 app/containers/UIKit/Select.tsx               | 16 ++---
 app/containers/UIKit/index.tsx                | 71 ++++++++-----------
 app/containers/UIKit/interfaces.ts            | 21 +++---
 app/containers/UIKit/utils.ts                 | 13 +++-
 app/containers/message/Attachments.tsx        |  1 -
 app/containers/message/Image.tsx              |  9 +--
 app/definitions/IAttachment.ts                |  2 +-
 app/externalModules.d.ts                      |  1 -
 app/views/AttachmentView.tsx                  |  4 +-
 .../CreateDiscussionView/SelectChannel.tsx    |  5 +-
 .../CreateDiscussionView/SelectUsers.tsx      |  1 -
 app/views/LivechatEditView.tsx                |  1 -
 app/views/RoomInfoEditView/index.tsx          |  2 -
 24 files changed, 151 insertions(+), 142 deletions(-)

diff --git a/app/containers/ReactionsModal.tsx b/app/containers/ReactionsModal.tsx
index 3240baff6..2cf27a284 100644
--- a/app/containers/ReactionsModal.tsx
+++ b/app/containers/ReactionsModal.tsx
@@ -74,7 +74,7 @@ interface IItem {
 
 interface IModalContent {
 	message?: TMessageModel;
-	onClose: Function;
+	onClose: () => void;
 	theme: string;
 }
 
diff --git a/app/containers/SearchBox.tsx b/app/containers/SearchBox.tsx
index 463413b71..e19cd5343 100644
--- a/app/containers/SearchBox.tsx
+++ b/app/containers/SearchBox.tsx
@@ -47,11 +47,11 @@ const styles = StyleSheet.create({
 interface ISearchBox extends TextInputProps {
 	value?: string;
 	hasCancel?: boolean;
-	onCancelPress?: Function;
+	onCancelPress?: () => void;
 	inputRef?: React.Ref<RNTextInput>;
 }
 
-const CancelButton = ({ onCancelPress }: { onCancelPress?: Function }) => {
+const CancelButton = ({ onCancelPress }: { onCancelPress?: () => void }) => {
 	const { theme } = useTheme();
 	return (
 		<Touchable onPress={onCancelPress} style={styles.cancel}>
@@ -84,7 +84,7 @@ const SearchBox = ({ hasCancel, onCancelPress, inputRef, ...props }: ISearchBox)
 					{...props}
 				/>
 			</View>
-			{hasCancel ? <CancelButton onCancelPress={onCancelPress} /> : null}
+			{hasCancel && onCancelPress ? <CancelButton onCancelPress={onCancelPress} /> : null}
 		</View>
 	);
 };
diff --git a/app/containers/UIKit/Actions.tsx b/app/containers/UIKit/Actions.tsx
index 801e8d4ae..ad267013d 100644
--- a/app/containers/UIKit/Actions.tsx
+++ b/app/containers/UIKit/Actions.tsx
@@ -4,8 +4,10 @@ import { BLOCK_CONTEXT } from '@rocket.chat/ui-kit';
 import Button from '../Button';
 import I18n from '../../i18n';
 import { IActions } from './interfaces';
+import { useTheme } from '../../theme';
 
-export const Actions = ({ blockId, appId, elements, parser, theme }: IActions) => {
+export const Actions = ({ blockId, appId, elements, parser }: IActions) => {
+	const { theme } = useTheme();
 	const [showMoreVisible, setShowMoreVisible] = useState(() => elements && elements.length > 5);
 	const renderedElements = showMoreVisible ? elements?.slice(0, 5) : elements;
 
diff --git a/app/containers/UIKit/DatePicker.tsx b/app/containers/UIKit/DatePicker.tsx
index 08b5343a8..69ebb1296 100644
--- a/app/containers/UIKit/DatePicker.tsx
+++ b/app/containers/UIKit/DatePicker.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { StyleSheet, Text, View } from 'react-native';
-import DateTimePicker from '@react-native-community/datetimepicker';
+import DateTimePicker, { Event } from '@react-native-community/datetimepicker';
 import Touchable from 'react-native-platform-touchable';
 import { BLOCK_CONTEXT } from '@rocket.chat/ui-kit';
 import moment from 'moment';
@@ -11,6 +11,7 @@ import { themes } from '../../constants/colors';
 import sharedStyles from '../../views/Styles';
 import { CustomIcon } from '../../lib/Icons';
 import { isAndroid } from '../../utils/deviceInfo';
+import { useTheme } from '../../theme';
 import ActivityIndicator from '../ActivityIndicator';
 import { IDatePicker } from './interfaces';
 
@@ -36,14 +37,17 @@ const styles = StyleSheet.create({
 	}
 });
 
-export const DatePicker = ({ element, language, action, context, theme, loading, value, error }: IDatePicker) => {
+export const DatePicker = ({ element, language, action, context, loading, value, error }: IDatePicker) => {
+	const { theme } = useTheme();
 	const [show, onShow] = useState(false);
 	const initial_date = element?.initial_date;
 	const placeholder = element?.placeholder;
 
 	const [currentDate, onChangeDate] = useState(new Date(initial_date || value));
 
-	const onChange = ({ nativeEvent: { timestamp } }: any, date: any) => {
+	// timestamp as number exists in Event
+	// @ts-ignore
+	const onChange = ({ nativeEvent: { timestamp } }: Event, date?: Date) => {
 		const newDate = date || new Date(timestamp);
 		onChangeDate(newDate);
 		action({ value: moment(newDate).format('YYYY-MM-DD') });
@@ -52,7 +56,9 @@ export const DatePicker = ({ element, language, action, context, theme, loading,
 		}
 	};
 
-	let button = <Button title={textParser([placeholder])} onPress={() => onShow(!show)} loading={loading} theme={theme} />;
+	let button = placeholder ? (
+		<Button title={textParser([placeholder])} onPress={() => onShow(!show)} loading={loading} theme={theme} />
+	) : null;
 
 	if (context === BLOCK_CONTEXT.FORM) {
 		button = (
diff --git a/app/containers/UIKit/Image.tsx b/app/containers/UIKit/Image.tsx
index 9e4317fb0..ad229fcb3 100644
--- a/app/containers/UIKit/Image.tsx
+++ b/app/containers/UIKit/Image.tsx
@@ -6,7 +6,7 @@ import { BLOCK_CONTEXT } from '@rocket.chat/ui-kit';
 import ImageContainer from '../message/Image';
 import Navigation from '../../lib/Navigation';
 import { IThumb, IImage, IElement } from './interfaces';
-import { TThemeMode } from '../../definitions/ITheme';
+import { IAttachment } from '../../definitions';
 
 const styles = StyleSheet.create({
 	image: {
@@ -27,23 +27,22 @@ export const Thumb = ({ element, size = 88 }: IThumb) => (
 	<FastImage style={[{ width: size, height: size }, styles.image]} source={{ uri: element?.imageUrl }} />
 );
 
-export const Media = ({ element, theme }: IImage) => {
-	const showAttachment = (attachment: any) => Navigation.navigate('AttachmentView', { attachment });
+export const Media = ({ element }: IImage) => {
+	const showAttachment = (attachment: IAttachment) => Navigation.navigate('AttachmentView', { attachment });
 	const imageUrl = element?.imageUrl ?? '';
-	// @ts-ignore
-	// TODO: delete ts-ignore after refactor Markdown and ImageContainer
-	return <ImageContainer file={{ image_url: imageUrl }} imageUrl={imageUrl} showAttachment={showAttachment} theme={theme} />;
+
+	return <ImageContainer file={{ image_url: imageUrl }} imageUrl={imageUrl} showAttachment={showAttachment} />;
 };
 
-const genericImage = (theme: TThemeMode, element: IElement, context?: number) => {
+const genericImage = (element: IElement, context?: number) => {
 	switch (context) {
 		case BLOCK_CONTEXT.SECTION:
 			return <Thumb element={element} />;
 		case BLOCK_CONTEXT.CONTEXT:
 			return <ThumbContext element={element} />;
 		default:
-			return <Media element={element} theme={theme} />;
+			return <Media element={element} />;
 	}
 };
 
-export const Image = ({ element, context, theme }: IImage) => genericImage(theme, element, context);
+export const Image = ({ element, context }: IImage) => genericImage(element, context);
diff --git a/app/containers/UIKit/MultiSelect/Chips.tsx b/app/containers/UIKit/MultiSelect/Chips.tsx
index 7c11b8aeb..7367bd497 100644
--- a/app/containers/UIKit/MultiSelect/Chips.tsx
+++ b/app/containers/UIKit/MultiSelect/Chips.tsx
@@ -7,26 +7,23 @@ import { themes } from '../../../constants/colors';
 import { textParser } from '../utils';
 import { CustomIcon } from '../../../lib/Icons';
 import styles from './styles';
+import { IItemData } from '.';
 
 interface IChip {
-	item: {
-		value: string;
-		imageUrl: string;
-		text: string;
-	};
-	onSelect: Function;
+	item: IItemData;
+	onSelect: (item: IItemData) => void;
 	style?: object;
 	theme: string;
 }
 
 interface IChips {
-	items: [];
-	onSelect: Function;
+	items: IItemData[];
+	onSelect: (item: IItemData) => void;
 	style?: object;
 	theme: string;
 }
 
-const keyExtractor = (item: any) => item.value.toString();
+const keyExtractor = (item: IItemData) => item.value.toString();
 
 const Chip = ({ item, onSelect, style, theme }: IChip) => (
 	<Touchable
diff --git a/app/containers/UIKit/MultiSelect/Input.tsx b/app/containers/UIKit/MultiSelect/Input.tsx
index ed4835c5e..00c5b20a1 100644
--- a/app/containers/UIKit/MultiSelect/Input.tsx
+++ b/app/containers/UIKit/MultiSelect/Input.tsx
@@ -9,10 +9,10 @@ import styles from './styles';
 
 interface IInput {
 	children?: JSX.Element;
-	onPress: Function;
+	onPress: () => void;
 	theme: string;
 	inputStyle?: object;
-	disabled?: boolean | object;
+	disabled?: boolean | null;
 	placeholder?: string;
 	loading?: boolean;
 	innerInputStyle?: object;
diff --git a/app/containers/UIKit/MultiSelect/Items.tsx b/app/containers/UIKit/MultiSelect/Items.tsx
index 149e2a82a..339139c1f 100644
--- a/app/containers/UIKit/MultiSelect/Items.tsx
+++ b/app/containers/UIKit/MultiSelect/Items.tsx
@@ -8,34 +8,31 @@ import * as List from '../../List';
 import { textParser } from '../utils';
 import { themes } from '../../../constants/colors';
 import styles from './styles';
+import { IItemData } from '.';
 
 interface IItem {
-	item: {
-		value: { name: string };
-		text: { text: string };
-		imageUrl: string;
-	};
-	selected: any;
+	item: IItemData;
+	selected?: string;
 	onSelect: Function;
 	theme: string;
 }
 
 interface IItems {
-	items: [];
-	selected: [];
+	items: IItemData[];
+	selected: string[];
 	onSelect: Function;
 	theme: string;
 }
 
-const keyExtractor = (item: any) => item.value.toString();
+const keyExtractor = (item: IItemData) => item.value.toString();
 
 // RectButton doesn't work on modal (Android)
 const Item = ({ item, selected, onSelect, theme }: IItem) => {
-	const itemName = item.value.name || item.text.text.toLowerCase();
+	const itemName = item.value || item.text.text.toLowerCase();
 	return (
 		<Touchable
 			testID={`multi-select-item-${itemName}`}
-			key={item}
+			key={itemName}
 			onPress={() => onSelect(item)}
 			style={[styles.item, { backgroundColor: themes[theme].backgroundColor }]}>
 			<>
diff --git a/app/containers/UIKit/MultiSelect/index.tsx b/app/containers/UIKit/MultiSelect/index.tsx
index 1038d4777..57ac91bf3 100644
--- a/app/containers/UIKit/MultiSelect/index.tsx
+++ b/app/containers/UIKit/MultiSelect/index.tsx
@@ -1,5 +1,15 @@
 import React, { useEffect, useState } from 'react';
-import { Animated, Easing, KeyboardAvoidingView, Modal, StyleSheet, Text, TouchableWithoutFeedback, View } from 'react-native';
+import {
+	Animated,
+	Easing,
+	KeyboardAvoidingView,
+	Modal,
+	StyleSheet,
+	Text,
+	TouchableWithoutFeedback,
+	View,
+	TextStyle
+} from 'react-native';
 import { BLOCK_CONTEXT } from '@rocket.chat/ui-kit';
 
 import Button from '../../Button';
@@ -8,26 +18,31 @@ import { textParser } from '../utils';
 import { themes } from '../../../constants/colors';
 import I18n from '../../../i18n';
 import { isIOS } from '../../../utils/deviceInfo';
+import { useTheme } from '../../../theme';
+import { BlockContext, IText } from '../interfaces';
 import Chips from './Chips';
 import Items from './Items';
 import Input from './Input';
 import styles from './styles';
 
+export interface IItemData {
+	value: string;
+	text: { text: string };
+	imageUrl?: string;
+}
+
 interface IMultiSelect {
-	options: any[];
+	options?: IItemData[];
 	onChange: Function;
-	placeholder: {
-		text: string;
-	};
-	context?: number;
+	placeholder?: IText;
+	context?: BlockContext;
 	loading?: boolean;
 	multiselect?: boolean;
 	onSearch?: () => void;
 	onClose?: () => void;
-	inputStyle?: object;
+	inputStyle?: TextStyle;
 	value?: any[];
-	disabled?: boolean | object;
-	theme: string;
+	disabled?: boolean | null;
 	innerInputStyle?: object;
 }
 
@@ -54,9 +69,9 @@ export const MultiSelect = React.memo(
 		onClose = () => {},
 		disabled,
 		inputStyle,
-		theme,
 		innerInputStyle
 	}: IMultiSelect) => {
+		const { theme } = useTheme();
 		const [selected, select] = useState<any>(Array.isArray(values) ? values : []);
 		const [open, setOpen] = useState(false);
 		const [search, onSearchChange] = useState('');
@@ -95,7 +110,7 @@ export const MultiSelect = React.memo(
 			}).start(() => setShowContent(false));
 		};
 
-		const onSelect = (item: any) => {
+		const onSelect = (item: IItemData) => {
 			const {
 				value,
 				text: { text }
diff --git a/app/containers/UIKit/Overflow.tsx b/app/containers/UIKit/Overflow.tsx
index a48fadd36..2d1f4c8b1 100644
--- a/app/containers/UIKit/Overflow.tsx
+++ b/app/containers/UIKit/Overflow.tsx
@@ -6,6 +6,7 @@ import Touchable from 'react-native-platform-touchable';
 import { CustomIcon } from '../../lib/Icons';
 import ActivityIndicator from '../ActivityIndicator';
 import { themes } from '../../constants/colors';
+import { useTheme } from '../../theme';
 import { BUTTON_HIT_SLOP } from '../message/utils';
 import * as List from '../List';
 import { IOption, IOptions, IOverflow } from './interfaces';
@@ -43,9 +44,10 @@ const Options = ({ options, onOptionPress, parser, theme }: IOptions) => (
 	/>
 );
 
-const touchable: { [key: string]: any } = {};
+const touchable: { [key: string]: Touchable | null } = {};
 
-export const Overflow = ({ element, loading, action, parser, theme }: IOverflow) => {
+export const Overflow = ({ element, loading, action, parser }: IOverflow) => {
+	const { theme } = useTheme();
 	const options = element?.options || [];
 	const blockId = element?.blockId || '';
 	const [show, onShow] = useState(false);
@@ -58,7 +60,7 @@ export const Overflow = ({ element, loading, action, parser, theme }: IOverflow)
 	return (
 		<>
 			<Touchable
-				ref={(ref: any) => (touchable[blockId] = ref)}
+				ref={ref => (touchable[blockId] = ref)}
 				background={Touchable.Ripple(themes[theme].bannerBackground)}
 				onPress={() => onShow(!show)}
 				hitSlop={BUTTON_HIT_SLOP}
@@ -71,6 +73,7 @@ export const Overflow = ({ element, loading, action, parser, theme }: IOverflow)
 			</Touchable>
 			<Popover
 				isVisible={show}
+				// fromView exists in Popover Component
 				/* @ts-ignore*/
 				fromView={touchable[blockId]}
 				onRequestClose={() => onShow(false)}>
diff --git a/app/containers/UIKit/Section.tsx b/app/containers/UIKit/Section.tsx
index 6a4c60744..5630b9660 100644
--- a/app/containers/UIKit/Section.tsx
+++ b/app/containers/UIKit/Section.tsx
@@ -4,6 +4,7 @@ import { BLOCK_CONTEXT } from '@rocket.chat/ui-kit';
 
 import { themes } from '../../constants/colors';
 import { IAccessoryComponent, IFields, ISection } from './interfaces';
+import { useTheme } from '../../theme';
 
 const styles = StyleSheet.create({
 	content: {
@@ -37,10 +38,14 @@ const Fields = ({ fields, parser, theme }: IFields) => (
 
 const accessoriesRight = ['image', 'overflow'];
 
-export const Section = ({ blockId, appId, text, fields, accessory, parser, theme }: ISection) => (
-	<View style={[styles.content, accessory && accessoriesRight.includes(accessory.type) ? styles.row : styles.column]}>
-		{text ? <View style={styles.text}>{parser.text(text)}</View> : null}
-		{fields ? <Fields fields={fields} theme={theme} parser={parser} /> : null}
-		{accessory ? <Accessory element={{ blockId, appId, ...accessory }} parser={parser} /> : null}
-	</View>
-);
+export const Section = ({ blockId, appId, text, fields, accessory, parser }: ISection) => {
+	const { theme } = useTheme();
+
+	return (
+		<View style={[styles.content, accessory && accessoriesRight.includes(accessory.type) ? styles.row : styles.column]}>
+			{text ? <View style={styles.text}>{parser.text(text)}</View> : null}
+			{fields ? <Fields fields={fields} theme={theme} parser={parser} /> : null}
+			{accessory ? <Accessory element={{ blockId, appId, ...accessory }} parser={parser} /> : null}
+		</View>
+	);
+};
diff --git a/app/containers/UIKit/Select.tsx b/app/containers/UIKit/Select.tsx
index 64951ea40..c2b213ac2 100644
--- a/app/containers/UIKit/Select.tsx
+++ b/app/containers/UIKit/Select.tsx
@@ -8,6 +8,8 @@ import { CustomIcon } from '../../lib/Icons';
 import { textParser } from './utils';
 import { isAndroid, isIOS } from '../../utils/deviceInfo';
 import ActivityIndicator from '../ActivityIndicator';
+import { useTheme } from '../../theme';
+import { IText, Option } from './interfaces';
 
 const styles = StyleSheet.create({
 	iosPadding: {
@@ -34,19 +36,16 @@ const styles = StyleSheet.create({
 });
 
 interface ISelect {
-	options: {
-		text: string;
-		value: string;
-	}[];
-	placeholder: string;
+	options?: Option[];
+	placeholder?: IText;
 	onChange: Function;
 	loading: boolean;
-	disabled: boolean;
+	disabled?: boolean;
 	value: [];
-	theme: string;
 }
 
-export const Select = ({ options = [], placeholder, onChange, loading, disabled, value: initialValue, theme }: ISelect) => {
+export const Select = ({ options = [], placeholder, onChange, loading, disabled, value: initialValue }: ISelect) => {
+	const { theme } = useTheme();
 	const [selected, setSelected] = useState(!Array.isArray(initialValue) && initialValue);
 	const items = options.map(option => ({ label: textParser([option.text]), value: option.value }));
 	const pickerStyle = {
@@ -80,6 +79,7 @@ export const Select = ({ options = [], placeholder, onChange, loading, disabled,
 			}}
 			Icon={Icon}
 			textInputProps={{
+				// style property was Omitted in lib, but can be used normally
 				// @ts-ignore
 				style: { ...styles.pickerText, color: selected ? themes[theme].titleText : themes[theme].auxiliaryText }
 			}}
diff --git a/app/containers/UIKit/index.tsx b/app/containers/UIKit/index.tsx
index 77c660967..8e7775a20 100644
--- a/app/containers/UIKit/index.tsx
+++ b/app/containers/UIKit/index.tsx
@@ -20,7 +20,7 @@ import { Input } from './Input';
 import { DatePicker } from './DatePicker';
 import { Overflow } from './Overflow';
 import { ThemeContext } from '../../theme';
-import { BlockContext, IButton, IInputIndex, IParser, IText } from './interfaces';
+import { BlockContext, IActions, IButton, IElement, IInputIndex, IParser, ISection, IText } from './interfaces';
 
 const styles = StyleSheet.create({
 	input: {
@@ -78,35 +78,28 @@ class MessageParser extends UiKitParserMessage {
 	}
 
 	divider() {
-		const { theme } = useContext(ThemeContext);
-		// @ts-ignore
-		return <Divider theme={theme} />;
+		return <Divider />;
 	}
 
-	section(args: any) {
-		const { theme } = useContext(ThemeContext);
-		return <Section {...args} theme={theme} parser={this} />;
+	section(args: ISection) {
+		return <Section {...args} parser={this.current} />;
 	}
 
-	actions(args: any) {
-		const { theme } = useContext(ThemeContext);
-		return <Actions {...args} theme={theme} parser={this} />;
+	actions(args: IActions) {
+		return <Actions {...args} parser={this.current} />;
 	}
 
-	overflow(element: any, context: any) {
-		const [{ loading }, action]: any = useBlockContext(element, context);
-		const { theme }: any = useContext(ThemeContext);
-		return <Overflow element={element} context={context} loading={loading} action={action} theme={theme} parser={this.current} />;
+	overflow(element: IElement, context: BlockContext) {
+		const [{ loading }, action] = useBlockContext(element, context);
+		return <Overflow element={element} context={context} loading={loading} action={action} parser={this.current} />;
 	}
 
-	datePicker(element: any, context: any) {
-		const [{ loading, value, error, language }, action]: any = useBlockContext(element, context);
-		const { theme }: any = useContext(ThemeContext);
+	datePicker(element: IElement, context: BlockContext) {
+		const [{ loading, value, error, language }, action] = useBlockContext(element, context);
 		return (
 			<DatePicker
 				element={element}
 				language={language}
-				theme={theme}
 				value={value}
 				action={action}
 				context={context}
@@ -116,9 +109,8 @@ class MessageParser extends UiKitParserMessage {
 		);
 	}
 
-	image(element: any, context: any) {
-		const { theme }: any = useContext(ThemeContext);
-		return <Image element={element} theme={theme} context={context} />;
+	image(element: IElement, context: BlockContext) {
+		return <Image element={element} context={context} />;
 	}
 
 	context(args: any) {
@@ -126,24 +118,19 @@ class MessageParser extends UiKitParserMessage {
 		return <Context {...args} theme={theme} parser={this} />;
 	}
 
-	multiStaticSelect(element: any, context: any) {
-		const [{ loading, value }, action]: any = useBlockContext(element, context);
-		const { theme } = useContext(ThemeContext);
-		return (
-			<MultiSelect {...element} theme={theme} value={value} onChange={action} context={context} loading={loading} multiselect />
-		);
+	multiStaticSelect(element: IElement, context: BlockContext) {
+		const [{ loading, value }, action] = useBlockContext(element, context);
+		return <MultiSelect {...element} value={value} onChange={action} context={context} loading={loading} multiselect />;
 	}
 
-	staticSelect(element: any, context: any) {
-		const [{ loading, value }, action]: any = useBlockContext(element, context);
-		const { theme } = useContext(ThemeContext);
-		return <Select {...element} theme={theme} value={value} onChange={action} loading={loading} />;
+	staticSelect(element: IElement, context: BlockContext) {
+		const [{ loading, value }, action] = useBlockContext(element, context);
+		return <Select {...element} value={value} onChange={action} loading={loading} />;
 	}
 
-	selectInput(element: any, context: any) {
-		const [{ loading, value }, action]: any = useBlockContext(element, context);
-		const { theme } = useContext(ThemeContext);
-		return <MultiSelect {...element} theme={theme} value={value} onChange={action} context={context} loading={loading} />;
+	selectInput(element: IElement, context: BlockContext) {
+		const [{ loading, value }, action] = useBlockContext(element, context);
+		return <MultiSelect {...element} value={value} onChange={action} context={context} loading={loading} />;
 	}
 }
 
@@ -160,8 +147,8 @@ class ModalParser extends UiKitParserModal {
 	}
 
 	input({ element, blockId, appId, label, description, hint }: IInputIndex, context: number) {
-		const [{ error }]: any = useBlockContext({ ...element, appId, blockId }, context);
-		const { theme }: any = useContext(ThemeContext);
+		const [{ error }] = useBlockContext({ ...element, appId, blockId }, context);
+		const { theme } = useContext(ThemeContext);
 		return (
 			<Input
 				parser={this.current}
@@ -175,17 +162,15 @@ class ModalParser extends UiKitParserModal {
 		);
 	}
 
-	image(element: any, context: any) {
-		const { theme }: any = useContext(ThemeContext);
-		return <Image element={element} theme={theme} context={context} />;
+	image(element: IElement, context: BlockContext) {
+		return <Image element={element} context={context} />;
 	}
 
-	plainInput(element: any, context: any) {
-		const [{ loading, value, error }, action]: any = useBlockContext(element, context);
+	plainInput(element: IElement, context: BlockContext) {
+		const [{ loading, value, error }, action] = useBlockContext(element, context);
 		const { theme } = useContext(ThemeContext);
 		const { multiline, actionId, placeholder } = element;
 		return (
-			// @ts-ignore
 			<TextInput
 				key={actionId}
 				placeholder={plainText(placeholder)}
diff --git a/app/containers/UIKit/interfaces.ts b/app/containers/UIKit/interfaces.ts
index af41c34a3..465e2eff9 100644
--- a/app/containers/UIKit/interfaces.ts
+++ b/app/containers/UIKit/interfaces.ts
@@ -1,5 +1,3 @@
-import { TThemeMode } from '../../definitions/ITheme';
-
 export enum ElementTypes {
 	IMAGE = 'image',
 	BUTTON = 'button',
@@ -87,10 +85,11 @@ export interface IElement {
 	imageUrl?: string;
 	appId?: string;
 	blockId?: string;
+	multiline?: boolean;
 }
 
 export interface IText {
-	type: ElementTypes;
+	type?: ElementTypes;
 	text: string;
 	emoji?: boolean;
 }
@@ -98,12 +97,15 @@ export interface IText {
 export interface Option {
 	text: IText;
 	value: string;
+	imageUrl?: string;
 }
 
 export interface IButton {
 	type: ElementTypes;
 	text: IText;
 	actionId: string;
+	blockId: string;
+	appId: string;
 	value?: any;
 	style?: any;
 }
@@ -177,7 +179,6 @@ export interface IParser {
 }
 export interface IActions extends Block {
 	parser?: IParser;
-	theme: TThemeMode;
 }
 
 export interface IContext extends Block {
@@ -191,7 +192,6 @@ export interface IDatePicker extends Partial<Block> {
 	loading: boolean;
 	value: string;
 	error: string;
-	theme: TThemeMode;
 }
 
 export interface IInput extends Partial<Block> {
@@ -199,7 +199,7 @@ export interface IInput extends Partial<Block> {
 	description: string;
 	error: string;
 	hint: string;
-	theme: TThemeMode;
+	theme: string;
 }
 
 export interface IInputIndex {
@@ -217,8 +217,7 @@ export interface IThumb {
 }
 export interface IImage {
 	element: IElement;
-	theme: TThemeMode;
-	context?: number;
+	context?: BlockContext;
 }
 
 // UiKit/Overflow
@@ -226,14 +225,13 @@ export interface IOverflow extends Partial<Block> {
 	action: Function;
 	loading: boolean;
 	parser: IParser;
-	theme: TThemeMode;
 	context: number;
 }
 
 interface PropsOption {
 	onOptionPress: Function;
 	parser: IParser;
-	theme: TThemeMode;
+	theme: string;
 }
 export interface IOptions extends PropsOption {
 	options: Option[];
@@ -262,12 +260,11 @@ export interface ISection {
 	text?: IText;
 	accessory?: IAccessory;
 	parser: IParser;
-	theme: TThemeMode;
 	fields?: any[];
 }
 
 export interface IFields {
 	parser: IParser;
-	theme: TThemeMode;
+	theme: string;
 	fields: any[];
 }
diff --git a/app/containers/UIKit/utils.ts b/app/containers/UIKit/utils.ts
index d148fdd56..7b00a7bea 100644
--- a/app/containers/UIKit/utils.ts
+++ b/app/containers/UIKit/utils.ts
@@ -2,9 +2,9 @@
 import React, { useContext, useState } from 'react';
 import { BLOCK_CONTEXT } from '@rocket.chat/ui-kit';
 
-import { BlockContext } from './interfaces';
+import { BlockContext, IText } from './interfaces';
 
-export const textParser = ([{ text }]: any) => text;
+export const textParser = ([{ text }]: IText[]) => text;
 
 export const defaultContext: any = {
 	action: (...args: any) => console.log(args),
@@ -27,7 +27,14 @@ type TFunctionReturn = (value: any) => Promise<void>;
 
 type TReturn = [TObjectReturn, TFunctionReturn];
 
-export const useBlockContext = ({ blockId, actionId, appId, initialValue }: any, context: BlockContext): TReturn => {
+interface IUseBlockContext {
+	blockId?: string;
+	actionId: string;
+	appId?: string;
+	initialValue?: string;
+}
+
+export const useBlockContext = ({ blockId, actionId, appId, initialValue }: IUseBlockContext, context: BlockContext): TReturn => {
 	const { action, appId: appIdFromContext, viewId, state, language, errors, values = {} } = useContext(KitContext);
 	const { value = initialValue } = values[actionId] || {};
 	const [loading, setLoading] = useState(false);
diff --git a/app/containers/message/Attachments.tsx b/app/containers/message/Attachments.tsx
index 3c0aeb2e3..6c6a6cb6a 100644
--- a/app/containers/message/Attachments.tsx
+++ b/app/containers/message/Attachments.tsx
@@ -54,7 +54,6 @@ const Attachments = React.memo(
 						getCustomEmoji={getCustomEmoji}
 						style={style}
 						isReply={isReply}
-						theme={theme}
 					/>
 				);
 			}
diff --git a/app/containers/message/Image.tsx b/app/containers/message/Image.tsx
index 8c59706d4..b0937ad5a 100644
--- a/app/containers/message/Image.tsx
+++ b/app/containers/message/Image.tsx
@@ -12,6 +12,7 @@ import { formatAttachmentUrl } from '../../lib/utils';
 import { themes } from '../../constants/colors';
 import MessageContext from './Context';
 import { TGetCustomEmoji } from '../../definitions/IEmoji';
+import { useTheme } from '../../theme';
 import { IAttachment } from '../../definitions';
 
 type TMessageButton = {
@@ -32,8 +33,7 @@ interface IMessageImage {
 	showAttachment?: Function;
 	style?: StyleProp<TextStyle>[];
 	isReply?: boolean;
-	theme: string;
-	getCustomEmoji: TGetCustomEmoji;
+	getCustomEmoji?: TGetCustomEmoji;
 }
 
 const ImageProgress = createImageProgress(FastImage);
@@ -61,7 +61,8 @@ export const MessageImage = React.memo(({ img, theme }: TMessageImage) => (
 ));
 
 const ImageContainer = React.memo(
-	({ file, imageUrl, showAttachment, getCustomEmoji, style, isReply, theme }: IMessageImage) => {
+	({ file, imageUrl, showAttachment, getCustomEmoji, style, isReply }: IMessageImage) => {
+		const { theme } = useTheme();
 		const { baseUrl, user } = useContext(MessageContext);
 		const img = imageUrl || formatAttachmentUrl(file.image_url, user.id, user.token, baseUrl);
 		if (!img) {
@@ -100,7 +101,7 @@ const ImageContainer = React.memo(
 			</Button>
 		);
 	},
-	(prevProps, nextProps) => dequal(prevProps.file, nextProps.file) && prevProps.theme === nextProps.theme
+	(prevProps, nextProps) => dequal(prevProps.file, nextProps.file)
 );
 
 ImageContainer.displayName = 'MessageImageContainer';
diff --git a/app/definitions/IAttachment.ts b/app/definitions/IAttachment.ts
index 94d0e6195..7aedd95ad 100644
--- a/app/definitions/IAttachment.ts
+++ b/app/definitions/IAttachment.ts
@@ -2,7 +2,7 @@ import { IUser } from './IUser';
 
 export interface IAttachment {
 	ts?: string | Date;
-	title: string;
+	title?: string;
 	type?: string;
 	description?: string;
 	title_link?: string;
diff --git a/app/externalModules.d.ts b/app/externalModules.d.ts
index 02c57204f..bec0d8103 100644
--- a/app/externalModules.d.ts
+++ b/app/externalModules.d.ts
@@ -3,7 +3,6 @@ declare module 'commonmark';
 declare module 'commonmark-react-renderer';
 declare module 'remove-markdown';
 declare module 'react-native-image-progress';
-declare module 'react-native-platform-touchable';
 declare module 'react-native-ui-lib/keyboard';
 declare module '@rocket.chat/ui-kit';
 declare module '@rocket.chat/sdk';
diff --git a/app/views/AttachmentView.tsx b/app/views/AttachmentView.tsx
index 1aef32b07..b51b116d3 100644
--- a/app/views/AttachmentView.tsx
+++ b/app/views/AttachmentView.tsx
@@ -84,7 +84,9 @@ class AttachmentView extends React.Component<IAttachmentViewProps, IAttachmentVi
 		const attachment = route.params?.attachment;
 		let { title } = attachment;
 		try {
-			title = decodeURI(title);
+			if (title) {
+				title = decodeURI(title);
+			}
 		} catch {
 			// Do nothing
 		}
diff --git a/app/views/CreateDiscussionView/SelectChannel.tsx b/app/views/CreateDiscussionView/SelectChannel.tsx
index f74c7d973..641a53f47 100644
--- a/app/views/CreateDiscussionView/SelectChannel.tsx
+++ b/app/views/CreateDiscussionView/SelectChannel.tsx
@@ -48,14 +48,13 @@ const SelectChannel = ({
 		<>
 			<Text style={[styles.label, { color: themes[theme].titleText }]}>{I18n.t('Parent_channel_or_group')}</Text>
 			<MultiSelect
-				theme={theme}
 				inputStyle={styles.inputStyle}
 				onChange={onChannelSelect}
 				onSearch={getChannels}
 				value={initial && [initial]}
-				disabled={initial}
+				disabled={!!initial}
 				options={channels.map(channel => ({
-					value: channel,
+					value: channel.name || channel.fname,
 					text: { text: RocketChat.getRoomTitle(channel) },
 					imageUrl: getAvatar(channel)
 				}))}
diff --git a/app/views/CreateDiscussionView/SelectUsers.tsx b/app/views/CreateDiscussionView/SelectUsers.tsx
index 6ef6e25df..cee43dfb5 100644
--- a/app/views/CreateDiscussionView/SelectUsers.tsx
+++ b/app/views/CreateDiscussionView/SelectUsers.tsx
@@ -77,7 +77,6 @@ const SelectUsers = ({
 		<>
 			<Text style={[styles.label, { color: themes[theme].titleText }]}>{I18n.t('Invite_users')}</Text>
 			<MultiSelect
-				theme={theme}
 				inputStyle={styles.inputStyle}
 				onSearch={getUsers}
 				onChange={onUserSelect}
diff --git a/app/views/LivechatEditView.tsx b/app/views/LivechatEditView.tsx
index f709245fd..bbd0d8ac7 100644
--- a/app/views/LivechatEditView.tsx
+++ b/app/views/LivechatEditView.tsx
@@ -275,7 +275,6 @@ const LivechatEditView = ({
 						value={tagParamSelected}
 						context={BLOCK_CONTEXT.FORM}
 						multiselect
-						theme={theme}
 						disabled={!permissions[1]}
 						inputStyle={styles.multiSelect}
 					/>
diff --git a/app/views/RoomInfoEditView/index.tsx b/app/views/RoomInfoEditView/index.tsx
index 615453be6..06d858d92 100644
--- a/app/views/RoomInfoEditView/index.tsx
+++ b/app/views/RoomInfoEditView/index.tsx
@@ -464,7 +464,6 @@ class RoomInfoEditView extends React.Component<IRoomInfoEditViewProps, IRoomInfo
 
 	renderSystemMessages = () => {
 		const { systemMessages, enableSysMes } = this.state;
-		const { theme } = this.props;
 
 		if (!enableSysMes) {
 			return null;
@@ -481,7 +480,6 @@ class RoomInfoEditView extends React.Component<IRoomInfoEditViewProps, IRoomInfo
 				value={systemMessages as string[]}
 				context={BLOCK_CONTEXT.FORM}
 				multiselect
-				theme={theme}
 			/>
 		);
 	};