[IMPROVE] - changing the types for interfaces, for our new patterns

app/containers/ActionSheet/ActionSheet.tsx

@@ -25,7 +25,7 @@ import * as List from '../List';
 import I18n from '../../i18n';
 import { useOrientation, useDimensions, IDimensionsContextProps } from '../../dimensions';
 
-type TActionSheetData = {
+interface IActionSheetData {
 	options: any;
 	headerHeight?: number;
 	hasCancel?: boolean;
@@ -48,7 +48,7 @@ const ANIMATION_CONFIG = {
 
 const ActionSheet = React.memo(forwardRef(({ children, theme }: {children: JSX.Element; theme: string}, ref) => {
 	const bottomSheetRef: any = useRef();
-	const [data, setData] = useState<TActionSheetData>({} as TActionSheetData);
+	const [data, setData] = useState<IActionSheetData>({} as IActionSheetData);
 	const [isVisible, setVisible] = useState(false);
 	const { height }: Partial<IDimensionsContextProps> = useDimensions();
 	const { isLandscape } = useOrientation();

app/containers/ActivityIndicator.tsx

@@ -2,10 +2,12 @@ import React from 'react';
 import { ActivityIndicator, ActivityIndicatorProps, StyleSheet } from 'react-native';
 import { themes } from '../constants/colors';
 
+type TTheme = 'light' | 'dark' | 'black' | string;
+
 interface IActivityIndicator extends ActivityIndicatorProps{
-	theme?: 'light' | 'dark' | 'black' | string,
+	theme?: TTheme;
-	absolute?: boolean,
+	absolute?: boolean;
-	props?: object
+	props?: object;
 }
 
 const styles = StyleSheet.create({

app/containers/Avatar/Avatar.tsx

@@ -6,7 +6,7 @@ import { settings as RocketChatSettings } from '@rocket.chat/sdk';
 
 import { avatarURL } from '../../utils/avatar';
 import Emoji from '../markdown/Emoji';
-import {TAvatar} from "./types";
+import {IAvatar} from "./interfaces";
 
 const Avatar = React.memo(({
 	server,
@@ -27,7 +27,7 @@ const Avatar = React.memo(({
     size = 25,
     borderRadius = 4,
     type = 'd',
-}: Partial<TAvatar>) => {
+}: Partial<IAvatar>) => {
 
 	if ((!text && !avatar && !emoji && !rid) || !server) {
 		return null;

app/containers/Avatar/index.tsx

@@ -5,10 +5,10 @@ import { Q } from '@nozbe/watermelondb';
 import database from '../../lib/database';
 import { getUserSelector } from '../../selectors/login';
 import Avatar from './Avatar';
-import {TAvatar} from "./types";
+import {IAvatar} from "./interfaces";
 
 
-class AvatarContainer extends React.Component<Partial<TAvatar>, any> {
+class AvatarContainer extends React.Component<Partial<IAvatar>, any> {
 	private mounted: boolean;
 	private subscription!: any;
 
@@ -17,7 +17,7 @@ class AvatarContainer extends React.Component<Partial<TAvatar>, any> {
 		type: 'd'
 	};
 
-	constructor(props: Partial<TAvatar>) {
+	constructor(props: Partial<IAvatar>) {
 		super(props);
 		this.mounted = false;
 		this.state = { avatarETag: '' };

app/containers/Avatar/interfaces.ts

@@ -1,4 +1,4 @@
-export type TAvatar = {
+export interface IAvatar {
     server: string;
     style: any,
     text: string;
@@ -20,4 +20,4 @@ export type TAvatar = {
     rid: string;
     blockUnauthenticatedAccess: boolean;
     serverVersion: string;
-}
+}

app/containers/Check.tsx

@@ -4,9 +4,9 @@ import { StyleSheet } from 'react-native';
 import { CustomIcon } from '../lib/Icons';
 import { themes } from '../constants/colors';
 
-type TCheck = {
+interface ICheck {
-	style?: object,
+	style?: object;
-	theme: string
+	theme: string;
 }
 const styles = StyleSheet.create({
 	icon: {
@@ -16,6 +16,6 @@ const styles = StyleSheet.create({
 	}
 });
 
-const Check = React.memo(({ theme, style }: TCheck) => <CustomIcon style={[styles.icon, style]} color={themes[theme].tintColor} size={22} name='check' />);
+const Check = React.memo(({ theme, style }: ICheck) => <CustomIcon style={[styles.icon, style]} color={themes[theme].tintColor} size={22} name='check' />);
 
 export default Check;

app/containers/EmojiPicker/CustomEmoji.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import FastImage from '@rocket.chat/react-native-fast-image';
-import {TCustomEmoji} from "./types";
+import {ICustomEmoji} from "./interfaces";
 
-const CustomEmoji = React.memo(({ baseUrl, emoji, style }: TCustomEmoji) => (
+const CustomEmoji = React.memo(({ baseUrl, emoji, style }: ICustomEmoji) => (
 	<FastImage
 		style={style}
 		source={{

app/containers/EmojiPicker/EmojiCategory.tsx

@@ -5,11 +5,11 @@ import shortnameToUnicode from '../../utils/shortnameToUnicode';
 import styles from './styles';
 import CustomEmoji from './CustomEmoji';
 import scrollPersistTaps from '../../utils/scrollPersistTaps';
-import {TEmoji, TEmojiCategory} from "./types";
+import {IEmoji, IEmojiCategory} from "./interfaces";
 
 const EMOJI_SIZE: number = 50;
 
-const renderEmoji = (emoji: TEmoji, size: number, baseUrl: string) => {
+const renderEmoji = (emoji: IEmoji, size: number, baseUrl: string) => {
 	if (emoji && emoji.isCustom) {
 		return <CustomEmoji style={[styles.customCategoryEmoji, { height: size - 16, width: size - 16 }]} emoji={emoji} baseUrl={baseUrl} />;
 	}
@@ -20,7 +20,7 @@ const renderEmoji = (emoji: TEmoji, size: number, baseUrl: string) => {
 	);
 };
 
-class EmojiCategory extends React.Component<Partial<TEmojiCategory>> {
+class EmojiCategory extends React.Component<Partial<IEmojiCategory>> {
 
 	renderItem(emoji: any) {
 		const { baseUrl, onEmojiSelected } = this.props;

app/containers/EmojiPicker/index.tsx

@@ -17,8 +17,7 @@ import shortnameToUnicode from '../../utils/shortnameToUnicode';
 import log from '../../utils/log';
 import { themes } from '../../constants/colors';
 import { withTheme } from '../../theme';
-
+import {IEmoji} from "./interfaces";
-import {TEmoji} from "./types";
 
 const scrollProps = {
 	keyboardShouldPersistTaps: 'always',
@@ -86,7 +85,7 @@ class EmojiPicker extends Component<IEmojiPickerProps, IEmojiPickerState> {
 		return false;
 	}
 
-	onEmojiSelected = (emoji: TEmoji) => {
+	onEmojiSelected = (emoji: IEmoji) => {
 		try {
 			const { onEmojiSelected } = this.props;
 			if (emoji.isCustom) {
@@ -106,7 +105,7 @@ class EmojiPicker extends Component<IEmojiPickerProps, IEmojiPickerState> {
 	}
 
 	// eslint-disable-next-line react/sort-comp
-	_addFrequentlyUsed = protectedFunction(async(emoji: TEmoji) => {
+	_addFrequentlyUsed = protectedFunction(async(emoji: IEmoji) => {
 		const db = database.active;
 		const freqEmojiCollection = db.get('frequently_used_emojis');
 		let freqEmojiRecord: any;
@@ -135,7 +134,7 @@ class EmojiPicker extends Component<IEmojiPickerProps, IEmojiPickerState> {
 		const db = database.active;
 		const frequentlyUsedRecords = await db.get('frequently_used_emojis').query().fetch();
 		let frequentlyUsed: any = orderBy(frequentlyUsedRecords, ['count'], ['desc']);
-		frequentlyUsed = frequentlyUsed.map((item: TEmoji) => {
+		frequentlyUsed = frequentlyUsed.map((item: IEmoji) => {
 			if (item.isCustom) {
 				return { content: item.content, extension: item.extension, isCustom: item.isCustom };
 			}

app/containers/EmojiPicker/interfaces.ts

@@ -1,22 +1,22 @@
-export type TEmoji = {
+export interface IEmoji {
     content: any;
     name: string;
     extension: any;
     isCustom: boolean;
 }
 
-export type TCustomEmoji = {
+export interface ICustomEmoji {
     baseUrl: string,
-    emoji: TEmoji,
+    emoji: IEmoji,
     style: any
 }
 
-export type TEmojiCategory = {
+export interface IEmojiCategory {
     baseUrl: string;
-    emojis: TEmoji[];
+    emojis: IEmoji[];
     onEmojiSelected({}: any): void;
     emojisPerRow: number;
     width: number;
     style: any;
     tabLabel: string;
-}
+}

app/containers/FormContainer.tsx

@@ -29,6 +29,7 @@ export const FormContainerInner = ({ children }: {children: JSX.Element}) => (
 );
 
 const FormContainer = ({ children, theme, testID, ...props }: IFormContainer) => (
+	// @ts-ignore
 	<KeyboardView
 		style={{ backgroundColor: themes[theme].backgroundColor }}
 		contentContainerStyle={sharedStyles.container}

app/containers/Header/index.tsx

@@ -20,7 +20,7 @@ export const getHeaderHeight = (isLandscape: boolean) => {
 	return 56;
 };
 
-type THeaderTitlePosition = {
+interface IHeaderTitlePosition {
 	insets: {
 		left: number;
 		right: number;
@@ -28,7 +28,7 @@ type THeaderTitlePosition = {
 	numIconsRight: number;
 }
 
-export const getHeaderTitlePosition = ({ insets, numIconsRight }: THeaderTitlePosition) => ({
+export const getHeaderTitlePosition = ({ insets, numIconsRight }: IHeaderTitlePosition) => ({
 	left: insets.left + 60,
 	right: insets.right + Math.max(45 * numIconsRight, 15)
 });

app/containers/List/ListContainer.tsx

@@ -9,10 +9,10 @@ const styles = StyleSheet.create({
 	}
 });
 
-type TListContainer = {
+interface IListContainer {
 	children: JSX.Element;
 }
-const ListContainer = React.memo(({ children, ...props }: TListContainer) => (
+const ListContainer = React.memo(({ children, ...props }: IListContainer) => (
 	// @ts-ignore
 	<ScrollView
 		contentContainerStyle={styles.container}

app/containers/List/ListSeparator.tsx

@@ -10,12 +10,12 @@ const styles = StyleSheet.create({
 	}
 });
 
-type TListSeparator = {
+interface IListSeparator {
 	style: object;
 	theme: string;
 }
 
-const ListSeparator = React.memo(({ style, theme }: TListSeparator) => (
+const ListSeparator = React.memo(({ style, theme }: IListSeparator) => (
 	<View
 		style={[
 			styles.separator,

app/containers/LoginServices.tsx

@@ -57,19 +57,19 @@ const styles = StyleSheet.create({
 	}
 });
 
-type TOpenOAuth = {
+interface IOpenOAuth {
 	url?: string;
 	ssoToken?: string;
 	authType?: string;
 }
 
-type TService = {
+interface IService {
 	name: string;
 	service: string;
 	authType: string;
 	buttonColor: string;
 	buttonLabelColor: string;
-};
+}
 
 interface ILoginServicesProps {
 	navigation: any;
@@ -255,7 +255,7 @@ class LoginServices extends React.PureComponent<ILoginServicesProps, any> {
 		return Base64.encodeURI(JSON.stringify(obj));
 	}
 
-	openOAuth = ({ url, ssoToken, authType = 'oauth' }: TOpenOAuth) => {
+	openOAuth = ({ url, ssoToken, authType = 'oauth' }: IOpenOAuth) => {
 		const { navigation } = this.props;
 		navigation.navigate('AuthenticationWebView', { url, authType, ssoToken });
 	}
@@ -326,7 +326,7 @@ class LoginServices extends React.PureComponent<ILoginServicesProps, any> {
 		return null;
 	}
 
-	renderItem = (service: TService) => {
+	renderItem = (service: IService) => {
 		const { CAS_enabled, theme } = this.props;
 		let { name } = service;
 		name = name === 'meteor-developer' ? 'meteor' : name;

app/containers/MessageActions/Header.tsx

@@ -10,7 +10,7 @@ import database from '../../lib/database';
 import { Button } from '../ActionSheet';
 import { useDimensions } from '../../dimensions';
 import sharedStyles from '../../views/Styles';
-import {TEmoji} from "../EmojiPicker";
+import {IEmoji} from "../EmojiPicker/interfaces";
 
 interface IHeader {
 	handleReaction: Function;
@@ -21,7 +21,7 @@ interface IHeader {
 }
 
 interface THeaderItem {
-	item: TEmoji;
+	item: IEmoji;
 	onReaction: Function;
 	server: string;
 	theme: string;
@@ -118,7 +118,7 @@ const Header = React.memo(({ handleReaction, server, message, isMasterDetail, th
 		setEmojis();
 	}, []);
 
-	const onReaction = ({ emoji }: {emoji: TEmoji}) => handleReaction(emoji, message);
+	const onReaction = ({ emoji }: {emoji: IEmoji}) => handleReaction(emoji, message);
 
 	const renderItem = useCallback(({ item }) => <HeaderItem item={item} onReaction={onReaction} server={server} theme={theme} />, []);
 

app/containers/MessageBox/EmojiKeyboard.tsx

@@ -11,6 +11,7 @@ import { withTheme } from '../../theme';
 interface IMessageBoxEmojiKeyboard {
 	theme: string
 }
+
 export default class EmojiKeyboard extends React.PureComponent<IMessageBoxEmojiKeyboard, any> {
 	private readonly baseUrl: any;
 

app/containers/MessageBox/Mentions/MentionEmoji.tsx

@@ -6,10 +6,10 @@ import shortnameToUnicode from '../../../utils/shortnameToUnicode';
 import styles from '../styles';
 import MessageboxContext from '../Context';
 import CustomEmoji from '../../EmojiPicker/CustomEmoji';
-import {TEmoji} from "../../EmojiPicker";
+import {IEmoji} from "../../EmojiPicker/interfaces";
 
 interface IMessageBoxMentionEmoji {
-	item: TEmoji;
+	item: IEmoji;
 }
 
 const MentionEmoji = ({ item }: IMessageBoxMentionEmoji) => {

app/containers/MessageBox/Mentions/MentionItem.tsx

@@ -8,7 +8,7 @@ import FixedMentionItem from './FixedMentionItem';
 import MentionEmoji from './MentionEmoji';
 import { MENTIONS_TRACKING_TYPE_EMOJIS,  MENTIONS_TRACKING_TYPE_COMMANDS } from '../constants';
 import { themes } from '../../../constants/colors';
-import {TEmoji} from "../../EmojiPicker";
+import {IEmoji} from "../../EmojiPicker/interfaces";
 
 interface IMessageBoxMentionItem {
 	item: {
@@ -17,7 +17,7 @@ interface IMessageBoxMentionItem {
 		username: string;
 		t: string;
 		id: string;
-	} & TEmoji;
+	} & IEmoji;
 	trackingType: string;
 	theme: string;
 }

app/containers/MessageBox/Mentions/index.tsx

@@ -11,6 +11,7 @@ interface IMessageBoxMentions {
 	trackingType: string;
 	theme: string;
 }
+
 const Mentions = React.memo(({ mentions, trackingType, theme }: IMessageBoxMentions) => {
 	if (!trackingType) {
 		return null;

app/containers/MessageBox/index.tsx

@@ -111,6 +111,7 @@ interface IMessageBoxProps {
 	sharing: boolean;
 	isActionsEnabled: boolean;
 }
+
 interface IMessageBoxState {
 	mentions: any[];
 	showEmojiKeyboard: boolean;

app/containers/Passcode/Base/Locked.tsx

@@ -11,18 +11,18 @@ import Title from './Title';
 import Subtitle from './Subtitle';
 import LockIcon from './LockIcon';
 
-type TPasscodeTimer = {
+interface IPasscodeTimer {
 	time: string;
 	theme: string;
 	setStatus: Function;
-};
+}
 
 interface IPasscodeLocked {
 	theme: string;
 	setStatus: Function;
 }
 
-const Timer = React.memo(({ time, theme, setStatus }: TPasscodeTimer) => {
+const Timer = React.memo(({ time, theme, setStatus }: IPasscodeTimer) => {
 	const calcTimeLeft = () => {
 		const diff = getDiff(time);
 		if (diff > 0) {
@@ -62,6 +62,8 @@ const Locked = React.memo(({ theme, setStatus }: IPasscodeLocked) => {
 	}, []);
 
 	return (
+		//TODO - verify if this 'r' it's correct
+		// @ts-ignore
 		<Grid style={[styles.grid, { backgroundColor: themes[theme].passcodeBackground }]} r>
 			<LockIcon theme={theme} />
 			<Title text={I18n.t('Passcode_app_locked_title')} theme={theme} />

app/containers/Passcode/PasscodeEnter.tsx

@@ -92,6 +92,7 @@ const PasscodeEnter = ({ theme, hasBiometry, finishProcess }: IPasscodePasscodeE
 	}
 
 	return (
+		// @ts-ignore
 		<Base
 			ref={ref}
 			theme={theme}

app/containers/ReactionsModal.tsx

@@ -59,7 +59,7 @@ const styles = StyleSheet.create({
 const standardEmojiStyle = { fontSize: 20 };
 const customEmojiStyle = { width: 20, height: 20 };
 
-type TItem = {
+interface IItem {
 	item: {
 		usernames: any;
 		emoji: string;
@@ -68,15 +68,15 @@ type TItem = {
 	baseUrl?: string;
 	getCustomEmoji?: Function;
 	theme?: string;
-};
+}
 
-type TModalContent = {
+interface IModalContent {
 	message: {
 		reactions: any
 	};
 	onClose: Function;
 	theme: string;
-};
+}
 
 interface IReactionsModal {
 	isVisible: boolean;
@@ -84,7 +84,7 @@ interface IReactionsModal {
 	theme: string;
 }
 
-const Item = React.memo(({ item, user, baseUrl, getCustomEmoji, theme }: TItem) => {
+const Item = React.memo(({ item, user, baseUrl, getCustomEmoji, theme }: IItem) => {
 	const count = item.usernames.length;
 	let usernames = item.usernames.slice(0, 3)
 		.map((username: any) => (username === user?.username ? I18n.t('you') : username)).join(', ');
@@ -114,7 +114,7 @@ const Item = React.memo(({ item, user, baseUrl, getCustomEmoji, theme }: TItem)
 	);
 });
 
-const ModalContent = React.memo(({ message, onClose, ...props }: TModalContent) => {
+const ModalContent = React.memo(({ message, onClose, ...props }: IModalContent) => {
 	if (message && message.reactions) {
 		return (
 			<SafeAreaView style={styles.safeArea}>

app/containers/TwoFactor/index.tsx

@@ -43,7 +43,7 @@ const methods: any = {
 const TwoFactor = React.memo(({ theme, isMasterDetail }: ITwoFactor) => {
 	const [visible, setVisible] = useState(false);
 	const [data, setData] = useState<any>({});
-	const [code, setCode] = useState('');
+	const [code, setCode] = useState<any>('');
 
 	const method = methods[data.method];
 	const isEmail = data.method === 'email';
@@ -102,6 +102,7 @@ const TwoFactor = React.memo(({ theme, isMasterDetail }: ITwoFactor) => {
 					<Text style={[styles.title, { color }]}>{I18n.t(method?.title || 'Two_Factor_Authentication')}</Text>
 					{method?.text ? <Text style={[styles.subtitle, { color }]}>{I18n.t(method.text)}</Text> : null}
 					<TextInput
+						/*@ts-ignore*/
 						value={code}
 						theme={theme}
 						inputRef={(e: any) => InteractionManager.runAfterInteractions(() => e?.getNativeRef()?.focus())}

app/containers/UIKit/Image.tsx

@@ -15,19 +15,19 @@ const styles = StyleSheet.create({
 	}
 });
 
-type TThumb = {
+interface IThumb {
 	element: {
 		imageUrl: string;
 	};
 	size?: number;
-};
+}
 
-type TMedia = {
+interface IMedia {
 	element: {
 		imageUrl: string;
 	};
 	theme: string;
-};
+}
 
 interface IImage {
 	element: any;
@@ -37,14 +37,14 @@ interface IImage {
 
 const ThumbContext = (args: any) => <View style={styles.mediaContext}><Thumb size={20} {...args} /></View>;
 
-export const Thumb = ({ element, size = 88 }: TThumb) => (
+export const Thumb = ({ element, size = 88 }: IThumb) => (
 	<FastImage
 		style={[{ width: size, height: size }, styles.image]}
 		source={{ uri: element.imageUrl }}
 	/>
 );
 
-export const Media = ({ element, theme }: TMedia) => {
+export const Media = ({ element, theme }: IMedia) => {
 	const showAttachment = (attachment: any) => Navigation.navigate('AttachmentView', { attachment });
 	const { imageUrl } = element;
 

app/containers/UIKit/MultiSelect/Chips.tsx

@@ -9,7 +9,7 @@ import { CustomIcon } from '../../../lib/Icons';
 
 import styles from './styles';
 
-type TChip = {
+interface IChip {
 	item: {
 		value: string;
 		imageUrl: string;
@@ -30,7 +30,7 @@ interface IChips {
 
 const keyExtractor = (item: any) => item.value.toString();
 
-const Chip = ({ item, onSelect, style, theme }: TChip) => (
+const Chip = ({ item, onSelect, style, theme }: IChip) => (
 	<Touchable
 		key={item.value}
 		onPress={() => onSelect(item)}

app/containers/UIKit/MultiSelect/Items.tsx

@@ -10,7 +10,7 @@ import { themes } from '../../../constants/colors';
 
 import styles from './styles';
 
-type TItem = {
+interface IItem {
 	item: {
 		value: { name: string; };
 		text: { text: string; };
@@ -19,7 +19,7 @@ type TItem = {
 	selected: any;
 	onSelect: Function;
 	theme: string;
-};
+}
 
 interface IItems {
 	items: [];
@@ -31,7 +31,7 @@ interface IItems {
 const keyExtractor = (item: any) => item.value.toString();
 
 // RectButton doesn't work on modal (Android)
-const Item = ({ item, selected, onSelect, theme }: TItem) => {
+const Item = ({ item, selected, onSelect, theme }: IItem) => {
 	const itemName = item.value.name || item.text.text.toLowerCase();
 	return (
 		<Touchable

app/containers/UIKit/MultiSelect/styles.ts

@@ -2,7 +2,7 @@ import { StyleSheet } from 'react-native';
 
 import sharedStyles from '../../../views/Styles';
 
-export default StyleSheet.create({
+export default StyleSheet.create<any>({
 	container: {
 		flex: 1,
 		alignItems: 'center',

app/containers/UIKit/Overflow.tsx

@@ -9,7 +9,7 @@ import { themes } from '../../constants/colors';
 import { BUTTON_HIT_SLOP } from '../message/utils';
 import * as List from '../List';
 
-type TOption = {
+interface IOption {
 	option: {
 		text: string;
 		value: string;
@@ -17,14 +17,14 @@ type TOption = {
 	onOptionPress: Function;
 	parser: any;
 	theme: string;
-};
+}
 
-type TOptions = {
+interface IOptions {
 	options: [];
 	onOptionPress: Function;
 	parser: object;
 	theme: string;
-};
+}
 
 interface IOverflow {
 	element: any;
@@ -50,7 +50,7 @@ const styles = StyleSheet.create({
 	}
 });
 
-const Option = ({ option: { text, value }, onOptionPress, parser, theme }: TOption) => (
+const Option = ({ option: { text, value }, onOptionPress, parser, theme }: IOption) => (
 	<Touchable
 		onPress={() => onOptionPress({ value })}
 		background={Touchable.Ripple(themes[theme].bannerBackground)}
@@ -60,7 +60,7 @@ const Option = ({ option: { text, value }, onOptionPress, parser, theme }: TOpti
 	</Touchable>
 );
 
-const Options = ({ options, onOptionPress, parser, theme }: TOptions) => (
+const Options = ({ options, onOptionPress, parser, theme }: IOptions) => (
 	<FlatList
 		data={options}
 		renderItem={({ item }) => <Option option={item} onOptionPress={onOptionPress} parser={parser} theme={theme} />}

app/containers/UIKit/Section.tsx

@@ -23,14 +23,14 @@ const styles = StyleSheet.create({
 	}
 });
 
-type TAccessory = {
+interface IAccessory {
 	blockId?: string;
 	appId?: string;
 	element: any;
 	parser: any
 }
 
-type TFields = {
+interface IFields {
 	fields: any;
 	parser: any;
 	theme: string;
@@ -46,13 +46,13 @@ interface ISection {
 	parser: any;
 }
 
-const Accessory = ({ blockId, appId, element, parser }: TAccessory) => parser.renderAccessories(
+const Accessory = ({ blockId, appId, element, parser }: IAccessory) => parser.renderAccessories(
 	{ blockId, appId, ...element },
 	BLOCK_CONTEXT.SECTION,
 	parser
 );
 
-const Fields = ({ fields, parser, theme }: TFields) => fields.map((field: any) => (
+const Fields = ({ fields, parser, theme }: IFields) => fields.map((field: any) => (
 	<Text style={[styles.text, styles.field, { color: themes[theme].bodyText }]}>
 		{parser.text(field)}
 	</Text>

app/containers/UIKit/index.tsx

@@ -236,6 +236,7 @@ class ModalParser extends UiKitParserModal {
 				inputStyle={multiline && styles.multiline}
 				containerStyle={styles.input}
 				value={value}
+				// @ts-ignore
 				error={{ error }}
 				theme={theme}
 			/>

app/containers/markdown/Hashtag.tsx

@@ -5,17 +5,15 @@ import { themes } from '../../constants/colors';
 
 import styles from './styles';
 
-export type TChannel = {
-	name: string;
-	_id: number;
-}
-
 interface IHashtag {
 	hashtag: string;
 	navToRoomInfo: Function;
 	style: [];
 	theme: string;
-	channels: TChannel[];
+	channels: {
+		name: string;
+		_id: number;
+	}[];
 }
 
 const Hashtag = React.memo(({ hashtag, channels, navToRoomInfo, style = [], theme }: IHashtag) => {

app/containers/markdown/index.tsx

@@ -12,7 +12,7 @@ import MarkdownLink from './Link';
 import MarkdownList from './List';
 import MarkdownListItem from './ListItem';
 import MarkdownAtMention from './AtMention';
-import MarkdownHashtag, {TChannel} from './Hashtag';
+import MarkdownHashtag from './Hashtag';
 import MarkdownBlockQuote from './BlockQuote';
 import MarkdownEmoji from './Emoji';
 import MarkdownTable from './Table';
@@ -33,7 +33,10 @@ interface IMarkdownProps {
 	numberOfLines: number;
 	customEmojis: boolean;
 	useRealName: boolean;
-	channels: TChannel[];
+	channels: {
+		name: string;
+		_id: number;
+	}[];
 	mentions: object[];
 	navToRoomInfo: Function;
 	preview: boolean;

app/containers/message/Attachments.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { dequal } from 'dequal';
 
-import {TMessageAttachments} from "./types";
+import {IMessageAttachments} from "./interfaces";
 
 import Image from './Image';
 import Audio from './Audio';
@@ -10,7 +10,7 @@ import Reply from './Reply';
 
 const Attachments = React.memo(({
 	attachments, timeFormat, showAttachment, getCustomEmoji, theme
-}: TMessageAttachments) => {
+}: IMessageAttachments) => {
 	if (!attachments || attachments.length === 0) {
 		return null;
 	}

app/containers/message/Audio.tsx

@@ -16,12 +16,12 @@ import MessageContext from './Context';
 import ActivityIndicator from '../ActivityIndicator';
 import { withDimensions } from '../../dimensions';
 
-type TButton = {
+interface IButton {
 	loading: boolean;
 	paused: boolean;
 	theme: string;
 	onPress: Function;
-};
+}
 
 interface IMessageAudioProps {
 	file: {
@@ -88,7 +88,7 @@ const sliderAnimationConfig = {
 	delay: 0
 };
 
-const Button = React.memo(({ loading, paused, onPress, theme }: TButton) => (
+const Button = React.memo(({ loading, paused, onPress, theme }: IButton) => (
 	<Touchable
 		style={styles.playPauseButton}
 		onPress={onPress}

app/containers/message/Blocks.ts

@@ -1,8 +1,8 @@
 import React from 'react';
 import { messageBlockWithContext } from '../UIKit/MessageBlock';
-import {TMessageBlocks} from "./types";
+import {IMessageBlocks} from "./interfaces";
 
-const Blocks = React.memo(({ blocks, id: mid, rid, blockAction }: TMessageBlocks) => {
+const Blocks = React.memo(({ blocks, id: mid, rid, blockAction }: IMessageBlocks) => {
 	if (blocks && blocks.length > 0) {
 		const appId = blocks[0]?.appId || '';
 		return React.createElement(

app/containers/message/Broadcast.tsx

@@ -8,9 +8,9 @@ import { BUTTON_HIT_SLOP } from './utils';
 import I18n from '../../i18n';
 import { themes } from '../../constants/colors';
 import MessageContext from './Context';
-import {TMessageBroadcast} from "./types";
+import {IMessageBroadcast} from "./interfaces";
 
-const Broadcast = React.memo(({ author, broadcast, theme }: TMessageBroadcast) => {
+const Broadcast = React.memo(({ author, broadcast, theme }: IMessageBroadcast) => {
 	const { user, replyBroadcast } = useContext(MessageContext);
 	const isOwn = author._id === user.id;
 	if (broadcast && !isOwn) {

app/containers/message/CallButton.tsx

@@ -7,9 +7,9 @@ import styles from './styles';
 import I18n from '../../i18n';
 import { CustomIcon } from '../../lib/Icons';
 import { themes } from '../../constants/colors';
-import {TMessageCallButton} from "./types";
+import {IMessageCallButton} from "./interfaces";
 
-const CallButton = React.memo(({ theme, callJitsi }: TMessageCallButton) => (
+const CallButton = React.memo(({ theme, callJitsi }: IMessageCallButton) => (
 	<View style={styles.buttonContainer}>
 		<Touchable
 			onPress={callJitsi}

app/containers/message/Content.tsx

@@ -11,9 +11,9 @@ import { themes } from '../../constants/colors';
 import MessageContext from './Context';
 import Encrypted from './Encrypted';
 import { E2E_MESSAGE_TYPE } from '../../lib/encryption/constants';
-import {TMessageContent} from "./types";
+import {IMessageContent} from "./interfaces";
 
-const Content = React.memo((props: TMessageContent) => {
+const Content = React.memo((props: IMessageContent) => {
 	if (props.isInfo) {
 		// @ts-ignore
 		const infoMessage = getInfoMessage({ ...props });

app/containers/message/Discussion.tsx

@@ -10,10 +10,10 @@ import { DISCUSSION } from './constants';
 import { themes } from '../../constants/colors';
 import MessageContext from './Context';
 import { formatDateThreads } from '../../utils/room';
-import {TMessageDiscussion} from "./types";
+import {IMessageDiscussion} from "./interfaces";
 
 
-const Discussion = React.memo(({ msg, dcount, dlm, theme }: TMessageDiscussion) => {
+const Discussion = React.memo(({ msg, dcount, dlm, theme }: IMessageDiscussion) => {
 	let time;
 	if (dlm) {
 		time = formatDateThreads(dlm);

app/containers/message/Emoji.tsx

@@ -3,14 +3,7 @@ import { Text } from 'react-native';
 
 import shortnameToUnicode from '../../utils/shortnameToUnicode';
 import CustomEmoji from '../EmojiPicker/CustomEmoji';
-
+import {IMessageEmoji} from "./interfaces";
-interface IMessageEmoji {
-	content: any;
-	baseUrl: string;
-	standardEmojiStyle: object;
-	customEmojiStyle: object;
-	getCustomEmoji: Function;
-}
 
 const Emoji = React.memo(({ content, baseUrl, standardEmojiStyle, customEmojiStyle, getCustomEmoji }: IMessageEmoji) => {
 	const parsedContent = content.replace(/^:|:$/g, '');

app/containers/message/Message.tsx

@@ -19,25 +19,9 @@ import Content from './Content';
 import ReadReceipt from './ReadReceipt';
 import CallButton from './CallButton';
 import { themes } from '../../constants/colors';
-import {TMessage, TMessageInner} from "./types";
+import {IMessage, IMessageInner, IMessageTouchable} from "./interfaces";
 
-interface IMessageTouchable {
+const MessageInner = React.memo((props: IMessageInner) => {
-	hasError: boolean;
-	isInfo: boolean;
-	isThreadReply: boolean;
-	isTemp: boolean;
-	archived: boolean;
-	highlighted: boolean;
-	theme: string;
-	ts?: any
-	urls?: any;
-	reactions?: any;
-	alias?: any;
-	role?: any;
-	drid?: any;
-}
-
-const MessageInner = React.memo((props: TMessageInner) => {
 	if (props.type === 'discussion-created') {
 		return (
 			<>
@@ -79,7 +63,7 @@ const MessageInner = React.memo((props: TMessageInner) => {
 });
 MessageInner.displayName = 'MessageInner';
 
-const Message = React.memo((props: TMessage) => {
+const Message = React.memo((props: IMessage) => {
 	if (props.isThreadReply || props.isThreadSequential || props.isInfo || props.isIgnored) {
 		const thread = props.isThreadReply ? <RepliedThread {...props} /> : null;
 		return (
@@ -123,7 +107,7 @@ const Message = React.memo((props: TMessage) => {
 });
 Message.displayName = 'Message';
 
-const MessageTouchable = React.memo((props: IMessageTouchable & TMessage) => {
+const MessageTouchable = React.memo((props: IMessageTouchable & IMessage) => {
 	if (props.hasError) {
 		return (
 			<View>

app/containers/message/MessageAvatar.tsx

@@ -3,11 +3,11 @@ import React, { useContext } from 'react';
 import Avatar from '../Avatar';
 import styles from './styles';
 import MessageContext from './Context';
-import {TMessageAvatar} from "./types";
+import {IMessageAvatar} from "./interfaces";
 
 const MessageAvatar = React.memo(({
 	isHeader, avatar, author, small, navToRoomInfo, emoji, getCustomEmoji, theme
-}: TMessageAvatar) => {
+}: IMessageAvatar) => {
 	const { user } = useContext(MessageContext);
 	if (isHeader && author) {
 		const navParam = {

app/containers/message/Reactions.tsx

@@ -10,18 +10,18 @@ import { themes } from '../../constants/colors';
 import { withTheme } from '../../theme';
 import MessageContext from './Context';
 
-type TMessageAddReaction = {
+interface IMessageAddReaction {
 	theme: string
-};
+}
 
-type TMessageReaction = {
+interface IMessageReaction {
 	reaction: {
 		usernames: [];
 		emoji: object;
 	};
 	getCustomEmoji: Function;
 	theme: string;
-};
+}
 
 interface IMessageReactions {
 	reactions: object[];
@@ -29,7 +29,7 @@ interface IMessageReactions {
 	theme: string;
 }
 
-const AddReaction = React.memo(({ theme }: TMessageAddReaction) => {
+const AddReaction = React.memo(({ theme }: IMessageAddReaction) => {
 	const { reactionInit } = useContext(MessageContext);
 	return (
 		<Touchable
@@ -47,9 +47,9 @@ const AddReaction = React.memo(({ theme }: TMessageAddReaction) => {
 	);
 });
 
-const Reaction = React.memo(({reaction, getCustomEmoji, theme}: TMessageReaction) => {
+const Reaction = React.memo(({reaction, getCustomEmoji, theme}: IMessageReaction) => {
 	const { onReactionPress, onReactionLongPress, baseUrl, user } = useContext(MessageContext);
-	const reacted = reaction.usernames.findIndex((item: TMessageReaction) => item === user.username) !== -1;
+	const reacted = reaction.usernames.findIndex((item: IMessageReaction) => item === user.username) !== -1;
 	return (
 		<Touchable
 			onPress={() => onReactionPress(reaction.emoji)}

app/containers/message/RepliedThread.tsx

@@ -6,12 +6,11 @@ import styles from './styles';
 import { themes } from '../../constants/colors';
 import I18n from '../../i18n';
 import Markdown from '../markdown';
-import {TMessageRepliedThread} from "./types";
+import {IMessageRepliedThread} from "./interfaces";
-
 
 const RepliedThread = memo(({
 	tmid, tmsg, isHeader, fetchThreadName, id, isEncrypted, theme
-}: TMessageRepliedThread) => {
+}: IMessageRepliedThread) => {
 	if (!tmid || !isHeader) {
 		return null;
 	}

app/containers/message/Reply.tsx

@@ -68,7 +68,7 @@ const styles = StyleSheet.create({
 	}
 });
 
-type TAttachment = {
+interface IMessageReplyAttachment {
 	author_name: string;
 	message_link: string;
 	ts: string;
@@ -81,36 +81,36 @@ type TAttachment = {
 	type: string;
 	color: string;
 	description: string;
-	fields: TAttachment[];
+	fields: IMessageReplyAttachment[];
 }
 
-type TMessageTitle = {
+interface IMessageTitle {
-	attachment: Partial<TAttachment>
+	attachment: Partial<IMessageReplyAttachment>
 	timeFormat: string;
 	theme: string;
-};
+}
 
-type TMessageDescription = {
+interface IMessageDescription {
-	attachment: Partial<TAttachment>
+	attachment: Partial<IMessageReplyAttachment>
 	getCustomEmoji: Function;
 	theme: string;
-};
+}
 
-type TMessageFields = {
+interface IMessageFields {
-	attachment: Partial<TAttachment>;
+	attachment: Partial<IMessageReplyAttachment>;
 	theme: string;
 	getCustomEmoji: Function;
-};
+}
 
 interface IMessageReply {
-	attachment: Partial<TAttachment>
+	attachment: Partial<IMessageReplyAttachment>
 	timeFormat: string;
 	index: number;
 	theme: string;
 	getCustomEmoji: Function;
 }
 
-const Title = React.memo(({ attachment, timeFormat, theme }: TMessageTitle) => {
+const Title = React.memo(({ attachment, timeFormat, theme }: IMessageTitle) => {
 	if (!attachment.author_name) {
 		return null;
 	}
@@ -123,7 +123,7 @@ const Title = React.memo(({ attachment, timeFormat, theme }: TMessageTitle) => {
 	);
 });
 
-const Description = React.memo(({ attachment, getCustomEmoji, theme }: TMessageDescription) => {
+const Description = React.memo(({ attachment, getCustomEmoji, theme }: IMessageDescription) => {
 	const text = attachment.text || attachment.title;
 	if (!text) {
 		return null;
@@ -152,7 +152,7 @@ const Description = React.memo(({ attachment, getCustomEmoji, theme }: TMessageD
 	return true;
 });
 
-const Fields = React.memo(({ attachment, theme, getCustomEmoji }: TMessageFields) => {
+const Fields = React.memo(({ attachment, theme, getCustomEmoji }: IMessageFields) => {
 	if (!attachment.fields) {
 		return null;
 	}

app/containers/message/Thread.tsx

@@ -6,9 +6,9 @@ import { themes } from '../../constants/colors';
 import MessageContext from './Context';
 import ThreadDetails from '../ThreadDetails';
 import I18n from '../../i18n';
-import {TMessageThread} from "./types";
+import {IMessageThread} from "./interfaces";
 
-const Thread = React.memo(({ msg, tcount, tlm, isThreadRoom, theme, id }: TMessageThread) => {
+const Thread = React.memo(({ msg, tcount, tlm, isThreadRoom, theme, id }: IMessageThread) => {
 	if (!tlm || isThreadRoom || tcount === 0) {
 		return null;
 	}

app/containers/message/Urls.tsx

@@ -49,13 +49,13 @@ const styles = StyleSheet.create({
 	}
 });
 
-type TMessageUrlContent = {
+interface IMessageUrlContent {
 	title: string;
 	description: string;
 	theme: string;
-};
+}
 
-type TMessageUrl = {
+interface IMessageUrl {
 	url: {
 		ignoreParse: boolean;
 		url: string;
@@ -65,7 +65,7 @@ type TMessageUrl = {
 	};
 	index: number;
 	theme: string;
-};
+}
 
 interface IMessageUrls {
 	urls: any;
@@ -81,7 +81,7 @@ const UrlImage = React.memo(({ image }: {image: string}) => {
 	return <FastImage source={{ uri: image }} style={styles.image} resizeMode={FastImage.resizeMode.cover} />;
 }, (prevProps, nextProps) => prevProps.image === nextProps.image);
 
-const UrlContent = React.memo(({ title, description, theme }: TMessageUrlContent) => (
+const UrlContent = React.memo(({ title, description, theme }: IMessageUrlContent) => (
 	<View style={styles.textContainer}>
 		{title ? <Text style={[styles.title, { color: themes[theme].tintColor }]} numberOfLines={2}>{title}</Text> : null}
 		{description ? <Text style={[styles.description, { color: themes[theme].auxiliaryText }]} numberOfLines={2}>{description}</Text> : null}
@@ -99,7 +99,7 @@ const UrlContent = React.memo(({ title, description, theme }: TMessageUrlContent
 	return true;
 });
 
-const Url = React.memo(({ url, index, theme }: TMessageUrl) => {
+const Url = React.memo(({ url, index, theme }: IMessageUrl) => {
 	if (!url || url?.ignoreParse) {
 		return null;
 	}

app/containers/message/interfaces.ts

@@ -1,6 +1,4 @@
-import {TChannel} from "../markdown/Hashtag";
+export interface IMessageAttachments {
-
-export type TMessageAttachments = {
     attachments: any;
     timeFormat: string;
     showAttachment: Function;
@@ -8,7 +6,7 @@ export type TMessageAttachments = {
     theme: string;
 }
 
-export type TMessageAvatar = {
+export interface IMessageAvatar {
     isHeader: boolean;
     avatar: string;
     emoji: string;
@@ -22,14 +20,14 @@ export type TMessageAvatar = {
     theme: string;
 }
 
-export type TMessageBlocks = {
+export interface IMessageBlocks {
     blocks: any;
     id: string;
     rid: string;
     blockAction: Function;
 }
 
-export type TMessageBroadcast = {
+export interface IMessageBroadcast {
     author: {
         _id: string
     };
@@ -37,12 +35,12 @@ export type TMessageBroadcast = {
     theme: string
 }
 
-export type TMessageCallButton = {
+export interface IMessageCallButton {
     theme: string;
     callJitsi: Function;
 }
 
-export type TMessageContent = {
+export interface IMessageContent {
     isTemp: boolean;
     isInfo: boolean;
     tmid: string;
@@ -52,7 +50,10 @@ export type TMessageContent = {
     isEdited: boolean;
     isEncrypted: boolean;
     getCustomEmoji: Function;
-    channels: TChannel[];
+    channels: {
+        name: string;
+        _id: number;
+    }[];
     mentions: object[];
     navToRoomInfo: Function;
     useRealName: boolean;
@@ -60,14 +61,22 @@ export type TMessageContent = {
     type: string;
 }
 
-export type TMessageDiscussion = {
+export interface IMessageDiscussion {
     msg: string;
     dcount: number;
     dlm: string;
     theme: string;
 }
 
-export type TMessageThread = {
+export interface IMessageEmoji {
+    content: any;
+    baseUrl: string;
+    standardEmojiStyle: object;
+    customEmojiStyle: object;
+    getCustomEmoji: Function;
+}
+
+export interface IMessageThread {
     msg: string;
     tcount: number;
     theme: string;
@@ -76,7 +85,23 @@ export type TMessageThread = {
     id: string;
 }
 
-export type TMessageRepliedThread = {
+export interface IMessageTouchable {
+    hasError: boolean;
+    isInfo: boolean;
+    isThreadReply: boolean;
+    isTemp: boolean;
+    archived: boolean;
+    highlighted: boolean;
+    theme: string;
+    ts?: any
+    urls?: any;
+    reactions?: any;
+    alias?: any;
+    role?: any;
+    drid?: any;
+}
+
+export interface IMessageRepliedThread {
     tmid: string;
     tmsg: string;
     id: string;
@@ -86,13 +111,13 @@ export type TMessageRepliedThread = {
     isEncrypted: boolean;
 }
 
-export type TMessageInner = {
+export interface IMessageInner extends IMessageDiscussion, IMessageContent, IMessageCallButton, IMessageBlocks,
+    IMessageThread, IMessageAttachments, IMessageBroadcast {
     type: string;
     blocks: [];
-} & TMessageDiscussion & TMessageContent & TMessageCallButton & TMessageBlocks
+}
-    & TMessageThread & TMessageAttachments & TMessageBroadcast;
 
-export type TMessage = {
+export interface IMessage extends IMessageRepliedThread, IMessageInner {
     isThreadReply: boolean;
     isThreadSequential: boolean;
     isInfo: boolean;
@@ -105,4 +130,4 @@ export type TMessage = {
     unread: boolean;
     theme: string;
     isIgnored: boolean;
-} & TMessageRepliedThread & TMessageAvatar & TMessageContent & TMessageInner;
+}

app/index.tsx

@@ -33,12 +33,13 @@ import { isFDroidBuild } from './constants/environment';
 
 RNScreens.enableScreens();
 
-type TDimensions = {
+interface IDimensions {
 	width: number,
 	height: number,
 	scale: number,
 	fontScale: number
 }
+
 interface IProps {}
 interface IState {
 	theme: string,
@@ -163,7 +164,7 @@ export default class Root extends React.Component<IProps, IState> {
 		window: {
 			width, height, scale, fontScale
 		}
-	}: {window: TDimensions}) => {
+	}: {window: IDimensions}) => {
 		this.setDimensions({
 			width, height, scale, fontScale
 		});
@@ -179,7 +180,7 @@ export default class Root extends React.Component<IProps, IState> {
 		});
 	}
 
-	setDimensions = ({width, height, scale, fontScale}: TDimensions) => {
+	setDimensions = ({width, height, scale, fontScale}: IDimensions) => {
 		this.setState({width, height, scale, fontScale});
 	}
 

app/presentation/DirectoryItem/index.tsx

@@ -9,7 +9,7 @@ import { themes } from '../../constants/colors';
 
 export { ROW_HEIGHT };
 
-type TDirectoryItemLabel = {
+interface IDirectoryItemLabel {
 	text: string;
 	theme: string;
 }
@@ -28,7 +28,7 @@ interface IDirectoryItem {
 	teamMain: boolean;
 }
 
-const DirectoryItemLabel = React.memo(({ text, theme }: TDirectoryItemLabel) => {
+const DirectoryItemLabel = React.memo(({ text, theme }: IDirectoryItemLabel) => {
 	if (!text) {
 		return null;
 	}

app/presentation/RoomItem/index.tsx

@@ -8,7 +8,6 @@ import RoomItem from './RoomItem';
 
 export { ROW_HEIGHT };
 
-
 interface IRoomItemContainerProps {
 	item: any;
 	showLastMessage: boolean;

app/share.tsx

@@ -28,12 +28,13 @@ import AuthLoadingView from './views/AuthLoadingView';
 import { DimensionsContext } from './dimensions';
 import debounce from './utils/debounce';
 
-type TDimensions = {
+interface IDimensions {
 	width: number,
 	height: number,
 	scale: number,
 	fontScale: number
 }
+
 interface IProps {}
 interface IState {
 	theme: string,
@@ -173,11 +174,11 @@ class Root extends React.Component<IProps, IState> {
 	}
 
 	// Dimensions update fires twice
-	onDimensionsChange = debounce(({window: { width, height, scale, fontScale}}: {window: TDimensions}) => {
+	onDimensionsChange = debounce(({window: { width, height, scale, fontScale}}: {window: IDimensions}) => {
 		this.setDimensions({ width, height, scale, fontScale });
 	})
 
-	setDimensions = ({ width, height, scale, fontScale }: TDimensions) => {
+	setDimensions = ({ width, height, scale, fontScale }: IDimensions) => {
 		this.setState({
 			width, height, scale, fontScale
 		});