[IMPROVE] - creating an emoji type file

app/containers/EmojiPicker/CustomEmoji.tsx

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

app/containers/EmojiPicker/EmojiCategory.tsx

@@ -5,20 +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";
 
 const EMOJI_SIZE: number = 50;
 
-interface IEmoji {
+const renderEmoji = (emoji: TEmoji, size: number, baseUrl: string) => {
-	baseUrl: string;
-	emojis: any;
-	onEmojiSelected({}: any): void;
-	emojisPerRow: number;
-	width: number;
-	style: any;
-	tabLabel: string;
-}
-
-const renderEmoji = (emoji: any, size: number, baseUrl: string) => {
 	if (emoji && emoji.isCustom) {
 		return <CustomEmoji style={[styles.customCategoryEmoji, { height: size - 16, width: size - 16 }]} emoji={emoji} baseUrl={baseUrl} />;
 	}
@@ -29,7 +20,7 @@ const renderEmoji = (emoji: any, size: number, baseUrl: string) => {
 	);
 };
 
-class EmojiCategory extends React.Component<Partial<IEmoji>> {
+class EmojiCategory extends React.Component<Partial<TEmojiCategory>> {
 
 	renderItem(emoji: any) {
 		const { baseUrl, onEmojiSelected } = this.props;

app/containers/EmojiPicker/TabBar.tsx

@@ -3,7 +3,7 @@ import { View, TouchableOpacity, Text } from 'react-native';
 import styles from './styles';
 import { themes } from '../../constants/colors';
 
-interface ITabBar {
+interface ITabBarProps {
 	goToPage({}): void;
 	activeTab: number,
 	tabs: [],
@@ -11,7 +11,7 @@ interface ITabBar {
 	theme: string
 }
 
-export default class TabBar extends React.Component<Partial<ITabBar>> {
+export default class TabBar extends React.Component<Partial<ITabBarProps>> {
 
 	shouldComponentUpdate(nextProps: any) {
 		const { activeTab, theme } = this.props;

app/containers/EmojiPicker/index.tsx

@@ -17,18 +17,24 @@ import shortnameToUnicode from '../../utils/shortnameToUnicode';
 import log from '../../utils/log';
 import { themes } from '../../constants/colors';
 import { withTheme } from '../../theme';
-import {IEmoji} from "../markdown/Emoji";
+
+import {TEmoji} from "./types";
 
 const scrollProps = {
 	keyboardShouldPersistTaps: 'always',
 	keyboardDismissMode: 'none'
 };
 
-export type TEmoji = {
+interface IEmojiPickerProps {
-	content: any;
+	literal: string;
-	name: string;
+	isMessageContainsOnlyEmoji: boolean;
-	extension: any;
+	getCustomEmoji?: Function;
-	isCustom: boolean;
+	baseUrl: string;
+	customEmojis?: any;
+	style: object;
+	theme?: string;
+	onEmojiSelected?: Function;
+	tabEmojiStyle?: object;
 }
 
 interface IEmojiPickerState {
@@ -38,9 +44,9 @@ interface IEmojiPickerState {
 	width: number | null;
 }
 
-class EmojiPicker extends Component<IEmoji, IEmojiPickerState> {
+class EmojiPicker extends Component<IEmojiPickerProps, IEmojiPickerState> {
 
-	constructor(props: IEmoji) {
+	constructor(props: IEmojiPickerProps) {
 		super(props);
 		const customEmojis = Object.keys(props.customEmojis)
 			.filter(item => item === props.customEmojis[item].name)
@@ -192,7 +198,7 @@ class EmojiPicker extends Component<IEmoji, IEmojiPickerState> {
 	}
 }
 
-const mapStateToProps = (state: IEmojiPickerState) => ({
+const mapStateToProps = (state: any) => ({
 	customEmojis: state.customEmojis
 });
 

app/containers/EmojiPicker/types.ts

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

app/containers/markdown/Emoji.tsx

@@ -7,7 +7,8 @@ import { themes } from '../../constants/colors';
 
 import styles from './styles';
 
-export interface IEmoji {
+// TODO this interface it's duplicated with 'app/containers/EmojiPicker/index.tsx'
+interface IEmoji {
 	literal: string;
 	isMessageContainsOnlyEmoji: boolean;
 	getCustomEmoji?: Function;