From 9b91d392b78153d5b0442be14b97e978eec8065c Mon Sep 17 00:00:00 2001
From: Jakub Grzywacz <kontakt@jakubgrzywacz.pl>
Date: Thu, 8 Jul 2021 20:17:20 +0200
Subject: [PATCH] fix: android RNGH

---
 .../MainActivity.java                         | 12 +++++
 example/src/App.tsx                           | 13 +++--
 src/EmojiKeyboard.tsx                         |  5 +-
 src/components/EmojiCategory.tsx              | 48 +++++++++++++++---
 src/components/Knob.tsx                       |  1 +
 src/components/ModalWithBackdrop.tsx          | 49 ++++++++++---------
 src/components/SingleEmoji.tsx                | 31 +++++++-----
 7 files changed, 107 insertions(+), 52 deletions(-)

diff --git a/example/android/app/src/main/java/com/example/reactnativeemojikeyboard/MainActivity.java b/example/android/app/src/main/java/com/example/reactnativeemojikeyboard/MainActivity.java
index d7bc846..bc44e0a 100644
--- a/example/android/app/src/main/java/com/example/reactnativeemojikeyboard/MainActivity.java
+++ b/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);
+      }
+    };
+  }
 }
diff --git a/example/src/App.tsx b/example/src/App.tsx
index 103ae05..49a759c 100644
--- a/example/src/App.tsx
+++ b/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,
-  },
 });
diff --git a/src/EmojiKeyboard.tsx b/src/EmojiKeyboard.tsx
index d55e21b..659d3c7 100644
--- a/src/EmojiKeyboard.tsx
+++ b/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>
diff --git a/src/components/EmojiCategory.tsx b/src/components/EmojiCategory.tsx
index f8030e2..ee788d1 100644
--- a/src/components/EmojiCategory.tsx
+++ b/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}
diff --git a/src/components/Knob.tsx b/src/components/Knob.tsx
index 30c51d3..656761c 100644
--- a/src/components/Knob.tsx
+++ b/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>
diff --git a/src/components/ModalWithBackdrop.tsx b/src/components/ModalWithBackdrop.tsx
index ceea955..d6721d0 100644
--- a/src/components/ModalWithBackdrop.tsx
+++ b/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>
   );
 };
diff --git a/src/components/SingleEmoji.tsx b/src/components/SingleEmoji.tsx
index d14781d..c490d03 100644
--- a/src/components/SingleEmoji.tsx
+++ b/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({