diff --git a/src/components/Categories.tsx b/src/components/Categories.tsx index 94be6da..c95a6d7 100644 --- a/src/components/Categories.tsx +++ b/src/components/Categories.tsx @@ -39,7 +39,7 @@ export const Categories = ({ flatListRef, scrollNav }: CategoriesProps) => { [disabledCategory, flatListRef] ); - const rendarItem = React.useCallback( + const renderItem = React.useCallback( ({ item, index }: { item: CategoryNavigationItem; index: number }) => ( { ), [activeCategoryContainerColor, scrollNav] ); - const isRecentlyUsedHidden = (category: CategoryTypes) => - category === 'recently_used' && - (keyboardState.recentlyUsed.length === 0 || !enableRecentlyUsed); const getStylesBasedOnPosition = () => { const style: ViewStyle[] = [styles.navigation]; @@ -96,17 +93,29 @@ export const Categories = ({ flatListRef, scrollNav }: CategoriesProps) => { return style; }; + const renderData = React.useMemo(() => { + const isRecentlyUsedHidden = (category: CategoryTypes) => + category === 'recently_used' && + (keyboardState.recentlyUsed.length === 0 || !enableRecentlyUsed); + return CATEGORIES_NAVIGATION.filter(({ category }) => { + if (searchPhrase === '' && category === 'search') return false; + if (isRecentlyUsedHidden(category)) return false; + return !disabledCategory.includes(category); + }); + }, [ + disabledCategory, + enableRecentlyUsed, + keyboardState.recentlyUsed.length, + searchPhrase, + ]); + return ( { - if (searchPhrase === '' && category === 'search') return false; - if (isRecentlyUsedHidden(category)) return false; - return !disabledCategory.includes(category); - })} + data={renderData} keyExtractor={(item) => item.category} - renderItem={rendarItem} + renderItem={renderItem} ItemSeparatorComponent={() => } showsHorizontalScrollIndicator={false} horizontal={true}