fix: android RNGH

example/android/app/src/main/java/com/example/reactnativeemojikeyboard/MainActivity.java

@@ -1,6 +1,9 @@
 package com.example.reactnativeemojikeyboard;
 
 import com.facebook.react.ReactActivity;
+import com.facebook.react.ReactActivityDelegate;
+import com.facebook.react.ReactRootView;
+import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;
 
 public class MainActivity extends ReactActivity {
 
@@ -12,4 +15,13 @@ public class MainActivity extends ReactActivity {
   protected String getMainComponentName() {
     return "EmojiKeyboardExample";
   }
+  @Override
+  protected ReactActivityDelegate createReactActivityDelegate() {
+    return new ReactActivityDelegate(this, getMainComponentName()) {
+      @Override
+      protected ReactRootView createRootView() {
+      return new RNGestureHandlerEnabledRootView(MainActivity.this);
+      }
+    };
+  }
 }

example/src/App.tsx

@@ -17,13 +17,18 @@ export default function App() {
     <SafeAreaView style={styles.container}>
       <Text style={styles.text}>Result: {result}</Text>
       <TouchableOpacity onPress={() => setIsModalOpen(true)}>
-        <Text>Open</Text>
+        <Text style={styles.text}>Open</Text>
       </TouchableOpacity>
+
+      {/* //////////////////////////////////////////// */}
+
       <EmojiPicker
         onEmojiSelected={handlePick}
         open={isModalOpen}
         onClose={() => setIsModalOpen(false)}
       />
+
+      {/* //////////////////////////////////////////// */}
     </SafeAreaView>
   );
 }
@@ -37,10 +42,4 @@ const styles = StyleSheet.create({
     margin: 64,
     fontSize: 18,
   },
-  containerStyles: {
-    backgroundColor: '#efefef',
-    borderTopLeftRadius: 24,
-    borderTopRightRadius: 24,
-    elevation: 20,
-  },
 });

src/EmojiKeyboard.tsx

@@ -6,8 +6,6 @@ import {
   FlatList,
   useWindowDimensions,
   Animated,
-  // NativeSyntheticEvent,
-  // NativeScrollEvent,
 } from 'react-native';
 import { CATEGORIES, CategoryTypes } from './types';
 import { EmojiCategory } from './components/EmojiCategory';
@@ -80,6 +78,9 @@ export const EmojiKeyboard = () => {
         getItemLayout={getItemLayout}
         scrollEnabled={false}
         // onScroll={onScroll}
+        initialNumToRender={1}
+        windowSize={7}
+        maxToRenderPerBatch={1}
       />
       <Categories flatListRef={flatListRef} scrollNav={scrollNav} />
     </View>

src/components/EmojiCategory.tsx

@@ -12,21 +12,33 @@ import type { CategoryTypes, EmojiType } from 'src/types';
 import { SingleEmoji } from './SingleEmoji';
 import { KeyboardContext } from '../KeyboardContext';
 
+const emptyEmoji = {
+  emoji: '',
+  name: 'blank emoji',
+  slug: 'blank_emoji',
+  skin_tone_support: false,
+  unicode_version: '0',
+  emoji_version: '0',
+};
+
 export const EmojiCategory = ({ item }: { item: CategoryTypes }) => {
   const { width } = useWindowDimensions();
   const ctx = React.useContext(KeyboardContext);
   const numberOfColumns = React.useRef<number>(
     Math.floor(width / (ctx.emojiSize + 20))
   );
-  const [data, setData] = React.useState<EmojiType[]>([]);
+  const [empty, setEmpty] = React.useState<EmojiType[]>([]);
 
   React.useEffect(() => {
-    const newData = emojisByGroup[item];
+    console.log(
+      numberOfColumns.current -
+        (emojisByGroup[item].length % numberOfColumns.current)
+    );
     const fillWithEmpty = new Array(
       numberOfColumns.current -
         (emojisByGroup[item].length % numberOfColumns.current)
-    ).fill('a');
-    setData([...newData, ...fillWithEmpty]);
+    ).fill(emptyEmoji);
+    setEmpty(fillWithEmpty);
   }, [item]);
 
   const getItemLayout = (_: EmojiType[] | null | undefined, index: number) => ({
@@ -36,8 +48,30 @@ export const EmojiCategory = ({ item }: { item: CategoryTypes }) => {
   });
 
   const renderItem = React.useCallback(
-    (props) => <SingleEmoji {...props} />,
-    []
+    // (props) => {
+    //   if (props.item.slug === 'blank_emoji')
+    //     return (
+    //       <View
+    //         {...props}
+    //         style={{ backgroundColor: 'blue', width: 10, height: 10 }}
+    //       />
+    //     );
+    //   else
+    //     return (
+    //       <View
+    //         {...props}
+    //         style={{ backgroundColor: 'red', width: 10, height: 10 }}
+    //       />
+    //     );
+    // },
+    (props) => (
+      <SingleEmoji
+        {...props}
+        onPress={() => ctx.onEmojiSelected(props.item)}
+        emojiSize={ctx.emojiSize}
+      />
+    ),
+    [ctx]
   );
 
   return (
@@ -46,7 +80,7 @@ export const EmojiCategory = ({ item }: { item: CategoryTypes }) => {
         <Text style={[styles.sectionTitle, ctx.headerStyles]}>{item}</Text>
       )}
       <FlatList
-        data={data}
+        data={[...emojisByGroup[item], ...empty]}
         keyExtractor={(emoji) => emoji.name}
         numColumns={numberOfColumns.current}
         renderItem={renderItem}

src/components/Knob.tsx

@@ -52,6 +52,7 @@ export const Knob = ({ offsetY, height, onClose }: KnobProps) => {
     <PanGestureHandler
       onGestureEvent={handleGesture}
       onHandlerStateChange={handleGesture}
+      hitSlop={{ vertical: 20, horizontal: 40 }}
     >
       <Animated.View style={[styles.knob, ctx.knobStyles]} />
     </PanGestureHandler>

src/components/ModalWithBackdrop.tsx

@@ -9,6 +9,7 @@ import {
   View,
 } from 'react-native';
 import { KeyboardContext } from '../KeyboardContext';
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
 
 type ModalWithBackdropProps = {
   isOpen: boolean;
@@ -35,30 +36,32 @@ export const ModalWithBackdrop = ({
 
   return (
     <Modal visible={isOpen} animationType="fade" transparent={true}>
-      <TouchableOpacity
-        style={styles.modalContainer}
-        activeOpacity={1}
-        onPress={backdropPress}
-      >
-        <View
-          style={[
-            styles.modalContainer,
-            { backgroundColor: ctx.backdropColor },
-          ]}
+      <GestureHandlerRootView style={styles.modalContainer}>
+        <TouchableOpacity
+          style={styles.modalContainer}
+          activeOpacity={1}
+          onPress={backdropPress}
         >
-          <SafeAreaView style={styles.modalContainer}>
-            <TouchableOpacity activeOpacity={1}>
-              <Animated.View
-                style={{
-                  transform: [{ translateY }],
-                }}
-              >
-                {children}
-              </Animated.View>
-            </TouchableOpacity>
-          </SafeAreaView>
-        </View>
-      </TouchableOpacity>
+          <View
+            style={[
+              styles.modalContainer,
+              { backgroundColor: ctx.backdropColor },
+            ]}
+          >
+            <SafeAreaView style={styles.modalContainer}>
+              <TouchableOpacity activeOpacity={1}>
+                <Animated.View
+                  style={{
+                    transform: [{ translateY }],
+                  }}
+                >
+                  {children}
+                </Animated.View>
+              </TouchableOpacity>
+            </SafeAreaView>
+          </View>
+        </TouchableOpacity>
+      </GestureHandlerRootView>
     </Modal>
   );
 };

src/components/SingleEmoji.tsx

@@ -1,20 +1,25 @@
 import * as React from 'react';
 import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
-import { KeyboardContext } from '../KeyboardContext';
 import type { EmojiType } from '../types';
 
-export const SingleEmoji = ({ item }: { item: EmojiType }) => {
-  const ctx = React.useContext(KeyboardContext);
-  return (
-    <TouchableOpacity
-      onPress={() => ctx?.onEmojiSelected(item)}
-      style={styles.container}
-    >
-      <View>
-        <Text style={{ fontSize: ctx?.emojiSize }}>{item.emoji}</Text>
-      </View>
-    </TouchableOpacity>
-  );
+export const SingleEmoji = ({
+  item,
+  onPress,
+  emojiSize,
+}: {
+  item: EmojiType;
+  onPress: (emojiObject: EmojiType) => void;
+  emojiSize: number;
+}) => {
+  if (item.slug !== 'blank_emoji')
+    return (
+      <TouchableOpacity onPress={() => onPress(item)} style={styles.container}>
+        <View>
+          <Text style={{ fontSize: emojiSize }}>{item.emoji}</Text>
+        </View>
+      </TouchableOpacity>
+    );
+  else return <View style={styles.container} />;
 };
 
 const styles = StyleSheet.create({