fix: infinite loop on category swipe (#168)

TheWidlarzGroup · Mar 25, 2024 · 4cbe3e2 · 4cbe3e2
1 parent 31aa092
commit 4cbe3e2
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 17 deletions.
diff --git a/src/components/Categories.tsx b/src/components/Categories.tsx
@@ -6,12 +6,13 @@ import { CategoryItem } from './CategoryItem'
 import { exhaustiveTypeCheck } from '../utils/exhaustiveTypeCheck'
 import { defaultTheme } from '../contexts/KeyboardContext'
 
-const CATEGORY_ELEMENT_WIDTH = 37
+export const CATEGORY_ELEMENT_WIDTH = 37
 
 const Separator = () => <View style={styles.separator} />
 
 type Props = {
   scrollNav?: Animated.Value
+  scrollEmojiCategoryListToIndex: (index: number) => void
 }
 
 export const Categories = (p: Props) => {
@@ -27,9 +28,13 @@ export const Categories = (p: Props) => {
   } = React.useContext(KeyboardContext)
 
   const scrollNav = React.useRef(new Animated.Value(0)).current
-  const handleScrollToCategory = React.useCallback(() => {
-    setShouldAnimateScroll(enableCategoryChangeAnimation)
-  }, [setShouldAnimateScroll, enableCategoryChangeAnimation])
+  const handleScrollToCategory = React.useCallback(
+    (index: number) => {
+      setShouldAnimateScroll(enableCategoryChangeAnimation)
+      p.scrollEmojiCategoryListToIndex(index)
+    },
+    [setShouldAnimateScroll, enableCategoryChangeAnimation, p],
+  )
 
   const renderItem = React.useCallback(
     ({ item, index }: { item: CategoryNavigationItem; index: number }) => (

diff --git a/src/components/CategoryItem.tsx b/src/components/CategoryItem.tsx
@@ -1,20 +1,20 @@
 import * as React from 'react'
 import { View, StyleSheet, TouchableOpacity } from 'react-native'
 import { KeyboardContext } from '../contexts/KeyboardContext'
-import type { CategoryNavigationItem, CategoryTypes } from '../types'
+import type { CategoryNavigationItem } from '../types'
 import { Icon } from './Icon'
 
 type CategoryItemProps = {
   item: CategoryNavigationItem
   index: number
-  handleScrollToCategory: (category: CategoryTypes) => void
+  handleScrollToCategory: (index: number) => void
 }
 
 export const CategoryItem = ({ item, index, handleScrollToCategory }: CategoryItemProps) => {
   const { activeCategoryIndex, theme, setActiveCategoryIndex } = React.useContext(KeyboardContext)
 
   const handleSelect = () => {
-    handleScrollToCategory(item.category)
+    handleScrollToCategory(index)
     setActiveCategoryIndex(index)
   }
 

diff --git a/src/components/EmojiStaticKeyboard.tsx b/src/components/EmojiStaticKeyboard.tsx
@@ -13,13 +13,12 @@ import {
 import { type EmojisByCategory } from '../types'
 import { EmojiCategory } from './EmojiCategory'
 import { KeyboardContext } from '../contexts/KeyboardContext'
-import { Categories } from './Categories'
+import { Categories, CATEGORY_ELEMENT_WIDTH } from './Categories'
 import { SearchBar } from './SearchBar'
 import { useKeyboardStore } from '../store/useKeyboardStore'
 import { ConditionalContainer } from './ConditionalContainer'
 import { SkinTones } from './SkinTones'
 
-const CATEGORY_ELEMENT_WIDTH = 37
 const isAndroid = Platform.OS === 'android'
 
 export const EmojiStaticKeyboard = React.memo(
@@ -85,13 +84,19 @@ export const EmojiStaticKeyboard = React.memo(
       [activeCategoryIndex],
     )
 
+    const scrollEmojiCategoryListToIndex = React.useCallback(
+      (index: number) => {
+        flatListRef.current?.scrollToIndex({
+          index,
+          animated: shouldAnimateScroll && enableCategoryChangeAnimation,
+        })
+      },
+      [enableCategoryChangeAnimation, shouldAnimateScroll],
+    )
+
     React.useEffect(() => {
-      flatListRef.current?.scrollToIndex({
-        index: activeCategoryIndex,
-        animated: shouldAnimateScroll && enableCategoryChangeAnimation,
-      })
       setKeyboardScrollOffsetY(0)
-    }, [activeCategoryIndex, enableCategoryChangeAnimation, shouldAnimateScroll])
+    }, [activeCategoryIndex])
 
     const keyExtractor = React.useCallback((item: EmojisByCategory) => item.title, [])
     const scrollNav = React.useRef(new Animated.Value(0)).current
@@ -134,7 +139,9 @@ export const EmojiStaticKeyboard = React.memo(
           )}
         >
           <>
-            {enableSearchBar && <SearchBar />}
+            {enableSearchBar && (
+              <SearchBar scrollEmojiCategoryListToIndex={scrollEmojiCategoryListToIndex} />
+            )}
             <Animated.FlatList<EmojisByCategory>
               extraData={[keyboardState.recentlyUsed.length, searchPhrase]}
               data={renderList}
@@ -155,7 +162,10 @@ export const EmojiStaticKeyboard = React.memo(
               keyboardShouldPersistTaps="handled"
               onMomentumScrollEnd={onScrollEnd}
             />
-            <Categories scrollNav={enableCategoryChangeGesture ? scrollNav : undefined} />
+            <Categories
+              scrollEmojiCategoryListToIndex={scrollEmojiCategoryListToIndex}
+              scrollNav={enableCategoryChangeGesture ? scrollNav : undefined}
+            />
             <SkinTones keyboardScrollOffsetY={keyboardScrollOffsetY} />
           </>
         </ConditionalContainer>

diff --git a/src/components/SearchBar.tsx b/src/components/SearchBar.tsx
@@ -3,7 +3,11 @@ import { View, StyleSheet, TextInput, TouchableOpacity } from 'react-native'
 import { KeyboardContext } from '../contexts/KeyboardContext'
 import { Icon } from './Icon'
 
-export const SearchBar = () => {
+type SearchBarProps = {
+  scrollEmojiCategoryListToIndex: (index: number) => void
+}
+
+export const SearchBar = ({ scrollEmojiCategoryListToIndex }: SearchBarProps) => {
   const {
     searchPhrase,
     setSearchPhrase,
@@ -24,6 +28,7 @@ export const SearchBar = () => {
 
     if (text === '') {
       await setActiveCategoryIndex(0)
+      scrollEmojiCategoryListToIndex(0)
       setShouldAnimateScroll(enableCategoryChangeAnimation)
 
       return
@@ -32,6 +37,7 @@ export const SearchBar = () => {
     const searchIndex = renderList.findIndex((cat) => cat.title === 'search')
     if (searchIndex !== -1) {
       setActiveCategoryIndex(searchIndex)
+      scrollEmojiCategoryListToIndex(searchIndex)
       setShouldAnimateScroll(enableSearchAnimation)
     }
   }
@@ -40,6 +46,7 @@ export const SearchBar = () => {
     clearEmojiTonesData()
     inputRef.current?.blur()
     setActiveCategoryIndex(0)
+    scrollEmojiCategoryListToIndex(0)
   }
 
   return (