Fix/emoji tones bugs (#137)

* fix: updating active category on scroll, clear emoji tones on scroll * fix: add reseting tones box position on category change * chore: deletes unneccesary clearEmojiTones
TheWidlarzGroup · Jun 18, 2023 · bfb10ec · bfb10ec
1 parent 0ee72b3
commit bfb10ec
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 5 deletions.
diff --git a/src/components/Categories.tsx b/src/components/Categories.tsx
@@ -20,7 +20,6 @@ export const Categories = (p: Props) => {
     onCategoryChangeFailed,
     categoryPosition,
     renderList,
-    clearEmojiTonesData,
     theme,
     styles: themeStyles,
     enableCategoryChangeAnimation,
@@ -29,9 +28,8 @@ export const Categories = (p: Props) => {
 
   const scrollNav = React.useRef(new Animated.Value(0)).current
   const handleScrollToCategory = React.useCallback(() => {
-    clearEmojiTonesData()
     setShouldAnimateScroll(enableCategoryChangeAnimation)
-  }, [clearEmojiTonesData, setShouldAnimateScroll, enableCategoryChangeAnimation])
+  }, [setShouldAnimateScroll, enableCategoryChangeAnimation])
 
   const renderItem = React.useCallback(
     ({ item, index }: { item: CategoryNavigationItem; index: number }) => (

diff --git a/src/components/EmojiStaticKeyboard.tsx b/src/components/EmojiStaticKeyboard.tsx
@@ -63,6 +63,7 @@ export const EmojiStaticKeyboard = React.memo(
         index: activeCategoryIndex,
         animated: shouldAnimateScroll && enableCategoryChangeAnimation,
       })
+      setKeyboardScrollOffsetY(0)
     }, [activeCategoryIndex, enableCategoryChangeAnimation, shouldAnimateScroll])
 
     const keyExtractor = React.useCallback((item: EmojisByCategory) => item.title, [])
@@ -72,9 +73,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 +122,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('')