[IMPROVE] migrate EmojiPicker component (in progress)

app/containers/EmojiPicker/EmojiCategory.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { Text, TouchableOpacity, FlatList } from 'react-native';
 
 import shortnameToUnicode from '../../utils/shortnameToUnicode';
@@ -7,9 +6,17 @@ import styles from './styles';
 import CustomEmoji from './CustomEmoji';
 import scrollPersistTaps from '../../utils/scrollPersistTaps';
 
-const EMOJI_SIZE = 50;
+const EMOJI_SIZE: number = 50;
 
-const renderEmoji = (emoji, size, baseUrl) => {
+interface IEmoji {
+	baseUrl: string;
+	emojis: any;
+	onEmojiSelected({}: any): void;
+	emojisPerRow: number;
+	width: number;
+}
+
+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} />;
 	}
@@ -20,16 +27,9 @@ const renderEmoji = (emoji, size, baseUrl) => {
 	);
 };
 
-class EmojiCategory extends React.Component {
+class EmojiCategory extends React.Component<IEmoji> {
-	static propTypes = {
-		baseUrl: PropTypes.string.isRequired,
-		emojis: PropTypes.any,
-		onEmojiSelected: PropTypes.func,
-		emojisPerRow: PropTypes.number,
-		width: PropTypes.number
-	}
 
-	renderItem(emoji) {
+	renderItem(emoji: any) {
 		const { baseUrl, onEmojiSelected } = this.props;
 		return (
 			<TouchableOpacity

app/containers/EmojiPicker/TabBar.tsx

@@ -1,19 +1,19 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { View, TouchableOpacity, Text } from 'react-native';
 import styles from './styles';
 import { themes } from '../../constants/colors';
 
-export default class TabBar extends React.Component {
+interface ITabBar {
-	static propTypes = {
+	goToPage({}): void;
-		goToPage: PropTypes.func,
+	activeTab: number,
-		activeTab: PropTypes.number,
+	tabs: [],
-		tabs: PropTypes.array,
+	tabEmojiStyle: object,
-		tabEmojiStyle: PropTypes.object,
+	theme: string
-		theme: PropTypes.string
+}
-	}
 
-	shouldComponentUpdate(nextProps) {
+export default class TabBar extends React.Component<ITabBar> {
+
+	shouldComponentUpdate(nextProps: any) {
 		const { activeTab, theme } = this.props;
 		if (nextProps.activeTab !== activeTab) {
 			return true;
@@ -25,9 +25,7 @@ export default class TabBar extends React.Component {
 	}
 
 	render() {
-		const {
+		const { tabs, goToPage, tabEmojiStyle, activeTab, theme } = this.props;
-			tabs, goToPage, tabEmojiStyle, activeTab, theme
-		} = this.props;
 
 		return (
 			<View style={styles.tabsContainer}>

package.json

@@ -138,10 +138,12 @@
     "@storybook/addon-storyshots": "5.3.19",
     "@storybook/react-native": "5.3.19",
     "@types/jest": "^26.0.24",
+    "@types/lodash": "^4.14.171",
     "@types/react": "^17.0.14",
     "@types/react-native": "^0.62.7",
     "@types/react-native-config-reader": "^4.1.0",
     "@types/react-native-platform-touchable": "^1.1.2",
+    "@types/react-native-scrollable-tab-view": "^0.10.2",
     "@types/react-redux": "^7.1.18",
     "@types/react-test-renderer": "^17.0.1",
     "@typescript-eslint/eslint-plugin": "^4.28.3",

yarn.lock

@@ -2834,6 +2834,11 @@
   resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee"
   integrity sha1-7ihweulOEdK4J7y+UnC86n8+ce4=
 
+"@types/lodash@^4.14.171":
+  version "4.14.171"
+  resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.171.tgz#f01b3a5fe3499e34b622c362a46a609fdb23573b"
+  integrity sha512-7eQ2xYLLI/LsicL2nejW9Wyko3lcpN6O/z0ZLHrEQsg280zIdCv1t/0m6UtBjUHokCGBQ3gYTbHzDkZ1xOBwwg==
+
 "@types/minimatch@*":
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/@types/minimatch/-/minimatch-3.0.3.tgz#3dca0e3f33b200fc7d1139c0cd96c1268cadfd9d"
@@ -2890,6 +2895,14 @@
     "@types/react" "*"
     "@types/react-native" "*"
 
+"@types/react-native-scrollable-tab-view@^0.10.2":
+  version "0.10.2"
+  resolved "https://registry.yarnpkg.com/@types/react-native-scrollable-tab-view/-/react-native-scrollable-tab-view-0.10.2.tgz#a6006efcad320b9dffd23b080cfe153cebcbc1a6"
+  integrity sha512-N6IObGTHFKIi2/lFqMLcUICjzqA8phbNWUC6apAdfBnJSrGWkHjTctPt28qpYaQA6KqtCsmhZ19RpzszDje0pg==
+  dependencies:
+    "@types/react" "*"
+    "@types/react-native" "*"
+
 "@types/react-native@*":
   version "0.64.12"
   resolved "https://registry.yarnpkg.com/@types/react-native/-/react-native-0.64.12.tgz#1c6a3226c26d7a5949cdf8878e6cfe95fe0951d6"