refactor: temporary disable scroll and fix active category

src/EmojiKeyboard.tsx

@@ -6,8 +6,8 @@ import {
   FlatList,
   useWindowDimensions,
   Animated,
-  NativeSyntheticEvent,
-  NativeScrollEvent,
+  // NativeSyntheticEvent,
+  // NativeScrollEvent,
 } from 'react-native';
 import { CATEGORIES, CategoryTypes } from './types';
 import { EmojiCategory } from './components/EmojiCategory';
@@ -20,7 +20,7 @@ export const EmojiKeyboard = () => {
 
   const flatListRef = React.useRef<FlatList>(null);
 
-  const scrollX = React.useRef(new Animated.Value(0)).current;
+  // const scrollX = React.useRef(new Animated.Value(0)).current;
   const scrollNav = React.useRef(new Animated.Value(0)).current;
 
   const getItemLayout = (
@@ -36,28 +36,36 @@ export const EmojiKeyboard = () => {
     (props) => <EmojiCategory {...props} />,
     []
   );
-  const onScroll = Animated.event(
-    [{ nativeEvent: { contentOffset: { x: scrollX } } }],
-    {
-      listener: ({
-        nativeEvent: {
-          contentOffset: { x },
-        },
-      }: NativeSyntheticEvent<NativeScrollEvent>) => {
-        Animated.spring(scrollNav, {
-          toValue: (x / width) * (28 + 9),
-          useNativeDriver: false,
-        }).start();
-      },
-      useNativeDriver: false,
-    }
-  );
+  // const onScroll = Animated.event(
+  //   [{ nativeEvent: { contentOffset: { x: scrollX } } }],
+  //   {
+  //     listener: ({
+  //       nativeEvent: {
+  //         contentOffset: { x },
+  //       },
+  //     }: NativeSyntheticEvent<NativeScrollEvent>) => {
+  //       console.log(Math.round(x / width));
+  //       ctx.setActiveCategoryIndex(Math.round(x / width));
+  //       // Animated.spring(scrollNav, {
+  //       //   toValue: (x / width) * (28 + 9),
+  //       //   useNativeDriver: true,
+  //       // }).start();
+  //     },
+  //     useNativeDriver: true,
+  //   }
+  // );
+  React.useEffect(() => {
+    Animated.spring(scrollNav, {
+      toValue: ctx.activeCategoryIndex * (28 + 9),
+      useNativeDriver: true,
+    }).start();
+  }, [ctx, scrollNav]);
 
   return (
     <View style={[styles.container, ctx.containerStyles]}>
-      <FlatList
+      <Animated.FlatList
         data={CATEGORIES}
-        keyExtractor={(item) => item}
+        keyExtractor={(item: CategoryTypes) => item}
         renderItem={renderItem}
         removeClippedSubviews={true}
         ref={flatListRef}
@@ -68,7 +76,8 @@ export const EmojiKeyboard = () => {
         scrollEventThrottle={16}
         decelerationRate="fast"
         getItemLayout={getItemLayout}
-        onScroll={onScroll}
+        scrollEnabled={false}
+        // onScroll={onScroll}
       />
       <Categories flatListRef={flatListRef} scrollNav={scrollNav} />
     </View>

src/EmojiPicker.tsx

@@ -28,6 +28,15 @@ export const EmojiPicker = ({
   const { height: screenHeight } = useWindowDimensions();
   const offsetY = React.useRef(new Animated.Value(0)).current;
   const height = React.useRef(new Animated.Value(screenHeight * 0.4)).current;
+  // const backdropOpacity = React.useRef(new Animated.Value(0)).current;
+
+  // React.useEffect(() => {
+  //   Animated.timing(backdropOpacity, {
+  //     toValue: isOpen ? 1 : 0,
+  //     useNativeDriver: false,
+  //     duration: 2000,
+  //   }).start();
+  // }, [backdropOpacity, isOpen]);
 
   return (
     <KeyboardProvider
@@ -37,6 +46,7 @@ export const EmojiPicker = ({
         onEmojiSelected(emoji);
         onClose();
       }}
+      isOpen={isOpen}
       {...props}
     >
       <Modal visible={isOpen} animationType="slide" transparent={true}>

src/KeyboardContext.tsx

@@ -10,6 +10,7 @@ export type KeyboardProps = {
   onEmojiSelected: (emoji: EmojiType) => void;
   emojiSize?: number;
   containerStyles?: ViewStyle;
+  isOpen?: boolean;
 };
 export type ContextValues = {
   activeCategoryIndex: number;

src/KeyboardProvider.tsx

@@ -14,6 +14,7 @@ export const defaultKeyboardContext: Required<KeyboardProps> = {
   onEmojiSelected: (_emoji: EmojiType) => {},
   emojiSize: 24,
   containerStyles: {},
+  isOpen: false,
 };
 
 export const defaultKeyboardValues: ContextValues = {
@@ -23,11 +24,11 @@ export const defaultKeyboardValues: ContextValues = {
 };
 
 export const KeyboardProvider: React.FC<ProviderProps> = React.memo((props) => {
-  const [activeCategoryIndex, setActive] = React.useState(0);
+  const [activeCategoryIndex, setActiveCategoryIndex] = React.useState(0);
 
-  const setActiveCategoryIndex = React.useCallback((index: number) => {
-    setActive(index);
-  }, []);
+  React.useEffect(() => {
+    if (props.isOpen) setActiveCategoryIndex(0);
+  }, [props.isOpen]);
 
   const value: Required<KeyboardProps> & ContextValues = {
     ...defaultKeyboardContext,

src/components/Categories.tsx

@@ -33,7 +33,15 @@ export const Categories = ({ flatListRef, scrollNav }: CategoriesProps) => {
 
   const activeIndicator = React.useCallback(
     () => (
-      <Animated.View style={[styles.activeIndicator, { left: scrollNav }]} />
+      // <Animated.View style={[styles.activeIndicator, { left: scrollNav }]} />
+      <Animated.View
+        style={[
+          styles.activeIndicator,
+          {
+            transform: [{ translateX: scrollNav }],
+          },
+        ]}
+      />
     ),
     [scrollNav]
   );