diff --git a/app/containers/EmojiPicker/EmojiCategory.tsx b/app/containers/EmojiPicker/EmojiCategory.tsx
index 0ef0690ad..3e1044aad 100644
--- a/app/containers/EmojiPicker/EmojiCategory.tsx
+++ b/app/containers/EmojiPicker/EmojiCategory.tsx
@@ -1,34 +1,31 @@
import React from 'react';
-import { useWindowDimensions } from 'react-native';
import { FlatList } from 'react-native-gesture-handler';
-import { EMOJI_BUTTON_SIZE } from './styles';
-import scrollPersistTaps from '../../lib/methods/helpers/scrollPersistTaps';
import { IEmoji } from '../../definitions/IEmoji';
+import scrollPersistTaps from '../../lib/methods/helpers/scrollPersistTaps';
import { PressableEmoji } from './PressableEmoji';
+import { EMOJI_BUTTON_SIZE } from './styles';
interface IEmojiCategoryProps {
emojis: IEmoji[];
onEmojiSelected: (emoji: IEmoji) => void;
tabLabel?: string; // needed for react-native-scrollable-tab-view only
+ parentWidth: number;
}
-const EmojiCategory = ({ onEmojiSelected, emojis }: IEmojiCategoryProps): React.ReactElement | null => {
- const { width } = useWindowDimensions();
-
- const numColumns = Math.trunc(width / EMOJI_BUTTON_SIZE);
- const marginHorizontal = (width % EMOJI_BUTTON_SIZE) / 2;
-
- const renderItem = ({ item }: { item: IEmoji }) => ;
-
- if (!width) {
+const EmojiCategory = ({ onEmojiSelected, emojis, parentWidth }: IEmojiCategoryProps): React.ReactElement | null => {
+ if (!parentWidth) {
return null;
}
+ const numColumns = Math.trunc(parentWidth / EMOJI_BUTTON_SIZE);
+ const marginHorizontal = (parentWidth % EMOJI_BUTTON_SIZE) / 2;
+
+ const renderItem = ({ item }: { item: IEmoji }) => ;
+
return (
(typeof item === 'string' ? item : item.name)}
data={emojis}
renderItem={renderItem}
diff --git a/app/containers/EmojiPicker/index.tsx b/app/containers/EmojiPicker/index.tsx
index 586ff2867..ac3aa3208 100644
--- a/app/containers/EmojiPicker/index.tsx
+++ b/app/containers/EmojiPicker/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
import { View } from 'react-native';
import ScrollableTabView from 'react-native-scrollable-tab-view';
@@ -20,6 +20,8 @@ const EmojiPicker = ({
searchedEmojis = []
}: IEmojiPickerProps): React.ReactElement | null => {
const { colors } = useTheme();
+ const [parentWidth, setParentWidth] = useState(0);
+
const { frequentlyUsed, loaded } = useFrequentlyUsedEmoji();
const allCustomEmojis: ICustomEmojis = useAppSelector(
@@ -50,7 +52,14 @@ const EmojiPicker = ({
if (!emojis.length) {
return null;
}
- return handleEmojiSelect(emoji)} tabLabel={label} />;
+ return (
+ handleEmojiSelect(emoji)}
+ tabLabel={label}
+ />
+ );
};
if (!loaded) {
@@ -58,9 +67,13 @@ const EmojiPicker = ({
}
return (
-
+ setParentWidth(e.nativeEvent.layout.width)}>
{searching ? (
- handleEmojiSelect(emoji)} />
+ handleEmojiSelect(emoji)}
+ parentWidth={parentWidth}
+ />
) : (
}