fix: adjust width to component (not window) width

TheWidlarzGroup · Oct 25, 2023 · 276326f · 276326f
1 parent 18c980a
commit 276326f
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 3 deletions.
diff --git a/src/components/EmojiStaticKeyboard.tsx b/src/components/EmojiStaticKeyboard.tsx
@@ -4,7 +4,6 @@ import {
   StyleSheet,
   View,
   FlatList,
-  useWindowDimensions,
   Animated,
   SafeAreaView,
   Platform,
@@ -25,7 +24,6 @@ const isAndroid = Platform.OS === 'android'
 
 export const EmojiStaticKeyboard = React.memo(
   () => {
-    const { width } = useWindowDimensions()
     const {
       activeCategoryIndex,
       setActiveCategoryIndex,
@@ -40,6 +38,8 @@ export const EmojiStaticKeyboard = React.memo(
       styles: themeStyles,
       shouldAnimateScroll,
       enableCategoryChangeAnimation,
+      width,
+      setWidth,
     } = React.useContext(KeyboardContext)
     const { keyboardState } = useKeyboardStore()
     const flatListRef = React.useRef<FlatList>(null)
@@ -96,6 +96,7 @@ export const EmojiStaticKeyboard = React.memo(
           themeStyles.container,
           { backgroundColor: theme.container },
         ]}
+        onLayout={(e) => setWidth(e.nativeEvent.layout.width)}
       >
         <ConditionalContainer
           condition={!disableSafeArea}

diff --git a/src/contexts/KeyboardContext.ts b/src/contexts/KeyboardContext.ts
@@ -93,6 +93,7 @@ export type ContextValues = {
   setActiveCategoryIndex: (index: number) => void
   numberOfColumns: number
   width: number
+  setWidth: (width: number) => void
   searchPhrase: string
   setSearchPhrase: (phrase: string) => void
   renderList: EmojisByCategory[]
@@ -179,6 +180,7 @@ export const defaultKeyboardValues: ContextValues = {
   setActiveCategoryIndex: () => {},
   numberOfColumns: 5,
   width: 0,
+  setWidth: (_width: number) => {},
   searchPhrase: '',
   setSearchPhrase: (_phrase: string) => {},
   renderList: [],

diff --git a/src/contexts/KeyboardProvider.tsx b/src/contexts/KeyboardProvider.tsx
@@ -27,7 +27,7 @@ type ProviderProps = Partial<KeyboardProps> &
   }
 
 export const KeyboardProvider: React.FC<ProviderProps> = React.memo((props) => {
-  const { width } = useWindowDimensions()
+  const [width, setWidth] = React.useState(useWindowDimensions().width)
   const [activeCategoryIndex, setActiveCategoryIndex] = React.useState(0)
   const [shouldAnimateScroll, setShouldAnimateScroll] = React.useState(true)
   const [searchPhrase, setSearchPhrase] = React.useState('')
@@ -181,6 +181,7 @@ export const KeyboardProvider: React.FC<ProviderProps> = React.memo((props) => {
       setActiveCategoryIndex,
       numberOfColumns: numberOfColumns.current,
       width,
+      setWidth,
       searchPhrase,
       setSearchPhrase,
       renderList,