diff --git a/app/containers/EmojiPicker/Footer.tsx b/app/containers/EmojiPicker/Footer.tsx
index 0d433ca3e..5c9e6db5c 100644
--- a/app/containers/EmojiPicker/Footer.tsx
+++ b/app/containers/EmojiPicker/Footer.tsx
@@ -18,7 +18,7 @@ const Footer = React.memo(({ onSearchPressed, onBackspacePressed }: IFooterProps
[{ opacity: pressed ? 0.7 : 1 }]}>
-
+
);
diff --git a/app/containers/EmojiPicker/TabBar.tsx b/app/containers/EmojiPicker/TabBar.tsx
index 22487f11d..51506816c 100644
--- a/app/containers/EmojiPicker/TabBar.tsx
+++ b/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'
}
]}>
- {tab}
+
))}
diff --git a/app/containers/EmojiPicker/categories.ts b/app/containers/EmojiPicker/categories.ts
index a95f67cf6..0e47fb3c5 100644
--- a/app/containers/EmojiPicker/categories.ts
+++ b/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]
}
];
diff --git a/app/containers/EmojiPicker/interfaces.ts b/app/containers/EmojiPicker/interfaces.ts
index 75ac29c5c..3fbee1617 100644
--- a/app/containers/EmojiPicker/interfaces.ts
+++ b/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;
}
diff --git a/app/containers/EmojiPicker/styles.ts b/app/containers/EmojiPicker/styles.ts
index 065e2e03c..073a226f1 100644
--- a/app/containers/EmojiPicker/styles.ts
+++ b/app/containers/EmojiPicker/styles.ts
@@ -8,14 +8,13 @@ export default StyleSheet.create({
},
tabsContainer: {
height: 45,
- flexDirection: 'row',
- paddingTop: 5
+ flexDirection: 'row'
},
tab: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
- paddingBottom: 10
+ paddingVertical: 10
},
tabEmoji: {
fontSize: 20,