Update tabBar icons

app/containers/EmojiPicker/Footer.tsx

@@ -18,7 +18,7 @@ const Footer = React.memo(({ onSearchPressed, onBackspacePressed }: IFooterProps
 			</BorderlessButton>
 
 			<Pressable onPress={onBackspacePressed} hitSlop={BUTTON_HIT_SLOP} style={({ pressed }) => [{ opacity: pressed ? 0.7 : 1 }]}>
-				<CustomIcon color={colors.auxiliaryTintColor} size={25} name='backspace' />
+				<CustomIcon color={colors.auxiliaryTintColor} size={24} name='backspace' />
 			</Pressable>
 		</View>
 	);

app/containers/EmojiPicker/TabBar.tsx

@@ -1,12 +1,13 @@
 import React from 'react';
-import { Text, Pressable, View } from 'react-native';
+import { Pressable, View } from 'react-native';
 
 import styles from './styles';
 import { useTheme } from '../../theme';
 import { ITabBarProps } from './interfaces';
 import { isIOS } from '../../lib/methods/helpers';
+import { CustomIcon } from '../CustomIcon';
 
-const TabBar = ({ activeTab, tabs, goToPage, tabEmojiStyle }: ITabBarProps): React.ReactElement => {
+const TabBar = ({ activeTab, tabs, goToPage }: ITabBarProps): React.ReactElement => {
 	const { colors } = useTheme();
 
 	return (
@@ -23,7 +24,7 @@ const TabBar = ({ activeTab, tabs, goToPage, tabEmojiStyle }: ITabBarProps): Rea
 							backgroundColor: isIOS && pressed ? colors.bannerBackground : 'transparent'
 						}
 					]}>
-					<Text style={[styles.tabEmoji, tabEmojiStyle]}>{tab}</Text>
+					<CustomIcon name={tab} size={24} color={colors.titleText} />
 					<View style={activeTab === i ? [styles.activeTabLine, { backgroundColor: colors.tintColor }] : styles.tabLine} />
 				</Pressable>
 			))}

app/containers/EmojiPicker/categories.ts

@@ -1,43 +1,43 @@
 const list = ['frequentlyUsed', 'custom', 'people', 'nature', 'food', 'activity', 'travel', 'objects', 'symbols', 'flags'];
 const tabs = [
 	{
-		tabLabel: '🕒',
+		tabLabel: 'clock',
 		category: list[0]
 	},
 	{
-		tabLabel: '🚀',
+		tabLabel: 'rocket',
 		category: list[1]
 	},
 	{
-		tabLabel: '😃',
+		tabLabel: 'emoji',
 		category: list[2]
 	},
 	{
-		tabLabel: '🐶',
+		tabLabel: 'leaf',
 		category: list[3]
 	},
 	{
-		tabLabel: '🍔',
+		tabLabel: 'burger',
 		category: list[4]
 	},
 	{
-		tabLabel: '⚽',
+		tabLabel: 'basketball',
 		category: list[5]
 	},
 	{
-		tabLabel: '🚌',
+		tabLabel: 'airplane',
 		category: list[6]
 	},
 	{
-		tabLabel: '💡',
+		tabLabel: 'lamp-bulb',
 		category: list[7]
 	},
 	{
-		tabLabel: '💛',
+		tabLabel: 'percentage',
 		category: list[8]
 	},
 	{
-		tabLabel: '🏁',
+		tabLabel: 'flag',
 		category: list[9]
 	}
 ];

app/containers/EmojiPicker/interfaces.ts

@@ -1,5 +1,6 @@
 import { StyleProp, TextStyle } from 'react-native';
 
+import { TIconsName } from '../CustomIcon';
 import { IEmoji } from '../../definitions';
 
 export enum EventTypes {
@@ -24,6 +25,6 @@ export interface IFooterProps {
 export interface ITabBarProps {
 	goToPage?: (page: number) => void;
 	activeTab?: number;
-	tabs?: string[];
+	tabs?: TIconsName[];
 	tabEmojiStyle: StyleProp<TextStyle>;
 }

app/containers/EmojiPicker/styles.ts

@@ -8,14 +8,13 @@ export default StyleSheet.create({
 	},
 	tabsContainer: {
 		height: 45,
-		flexDirection: 'row',
+		flexDirection: 'row'
-		paddingTop: 5
 	},
 	tab: {
 		flex: 1,
 		alignItems: 'center',
 		justifyContent: 'center',
-		paddingBottom: 10
+		paddingVertical: 10
 	},
 	tabEmoji: {
 		fontSize: 20,