fix: updating active category on scroll, clear emoji tones on scroll

TheWidlarzGroup · Jun 18, 2023 · 6c3b86c · 6c3b86c
1 parent 0ee72b3
commit 6c3b86c
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 2 deletions.
diff --git a/src/components/EmojiStaticKeyboard.tsx b/src/components/EmojiStaticKeyboard.tsx
@@ -72,9 +72,16 @@ export const EmojiStaticKeyboard = React.memo(
       (el: NativeSyntheticEvent<NativeScrollEvent>) => {
         const index = el.nativeEvent.contentOffset.x / width
         scrollNav.setValue(index * CATEGORY_ELEMENT_WIDTH)
-        if (Number.isInteger(index)) setActiveCategoryIndex(index)
       },
-      [scrollNav, setActiveCategoryIndex, width]
+      [scrollNav, width]
+    )
+
+    const onScrollEnd = React.useCallback(
+      (el: NativeSyntheticEvent<NativeScrollEvent>) => {
+        const index = el.nativeEvent.contentOffset.x / width
+        setActiveCategoryIndex(Math.round(index))
+      },
+      [setActiveCategoryIndex, width]
     )
 
     return (
@@ -114,6 +121,7 @@ export const EmojiStaticKeyboard = React.memo(
               maxToRenderPerBatch={1}
               onScroll={handleScroll}
               keyboardShouldPersistTaps="handled"
+              onMomentumScrollEnd={onScrollEnd}
             />
             <Categories scrollNav={enableCategoryChangeGesture ? scrollNav : undefined} />
             <SkinTones keyboardScrollOffsetY={keyboardScrollOffsetY} />

diff --git a/src/contexts/KeyboardProvider.tsx b/src/contexts/KeyboardProvider.tsx
@@ -103,6 +103,10 @@ export const KeyboardProvider: React.FC<ProviderProps> = React.memo((props) => {
 
   const clearEmojiTonesData = () => setEmojiTonesData(null)
 
+  React.useEffect(() => {
+    clearEmojiTonesData()
+  }, [activeCategoryIndex])
+
   React.useEffect(() => {
     if (props.open) setActiveCategoryIndex(0)
     setSearchPhrase('')