From f58aa52e40298ed6e9e49e8c802fc69d3129054f Mon Sep 17 00:00:00 2001
From: Jakub Grzywacz <kontakt@jakubgrzywacz.pl>
Date: Fri, 16 Jul 2021 14:20:44 +0200
Subject: [PATCH] fix: deps and emoji render

---
 README.md                        | 39 +++++++++++++++++++++++++++-----
 example/ios/Podfile.lock         |  6 -----
 example/src/App.tsx              |  5 ++--
 src/components/EmojiCategory.tsx |  2 +-
 tsconfig.json                    |  2 +-
 5 files changed, 38 insertions(+), 16 deletions(-)

diff --git a/README.md b/README.md
index 15bdc76..bcb08f5 100644
--- a/README.md
+++ b/README.md
@@ -13,11 +13,11 @@ export default function App() {
 
   const handlePick = (emojiObject: EmojiType) => {
     console.log(emojiObject);
-    /* example emojiObject = {    {
+    /* example emojiObject = { 
         "emoji": "❤️",
         "name": "red heart",
         "slug": "red_heart",
-      },
+      }
     */
   };
 
@@ -40,10 +40,6 @@ or
 ```sh
 npm install @jake7/react-native-emoji-keyboard
 ```
-## Full Example
-```js
-TODO
-```
 ## Accepted props (current implemented)
 | Name | Type | Default Value | Required | Description |
 |---|---|---|---|---|
@@ -95,5 +91,36 @@ translation={{
 }}
 ```
 *If you have written a translation into your language, we strongly encourage you to create a Pull Request and add your language to the package, following the example of other langs.*
+## Full Example
+```ts
+import * as React from 'react';
+import { Text, SafeAreaView, TouchableOpacity } from 'react-native';
+import EmojiPicker from '@jake7/react-native-emoji-keyboard';
+import { EmojiType } from '@jake7/react-native-emoji-keyboard/lib/typescript/types';
+
+export default function App() {
+const [result, setResult] = React.useState<string>();
+const [isModalOpen, setIsModalOpen] = React.useState<boolean>(false);
+
+const handlePick = (emoji: EmojiType) => {
+  setResult(emoji.emoji);
+  setIsModalOpen((prev) => !prev);
+  };
+
+  return (
+    <SafeAreaView>
+      <Text>Selected emoji: {result}</Text>
+      <TouchableOpacity onPress={() => setIsModalOpen(true)}>
+        <Text>Open</Text>
+      </TouchableOpacity>
+      <EmojiPicker
+        onEmojiSelected={handlePick}
+        open={isModalOpen}
+        onClose={() => setIsModalOpen(false)}
+      />
+    </SafeAreaView>
+  );
+}
+```
 ## License
  **[MIT](/LICENSE)**
diff --git a/example/ios/Podfile.lock b/example/ios/Podfile.lock
index 8236be5..11b36ad 100644
--- a/example/ios/Podfile.lock
+++ b/example/ios/Podfile.lock
@@ -297,8 +297,6 @@ PODS:
     - React-Core (= 0.63.4)
     - React-cxxreact (= 0.63.4)
     - React-jsi (= 0.63.4)
-  - RNGestureHandler (1.10.3):
-    - React-Core
   - RNSVG (12.1.1):
     - React
   - Yoga (1.14.0)
@@ -352,7 +350,6 @@ DEPENDENCIES:
   - React-RCTText (from `../node_modules/react-native/Libraries/Text`)
   - React-RCTVibration (from `../node_modules/react-native/Libraries/Vibration`)
   - ReactCommon/turbomodule/core (from `../node_modules/react-native/ReactCommon`)
-  - RNGestureHandler (from `../node_modules/react-native-gesture-handler`)
   - RNSVG (from `../node_modules/react-native-svg`)
   - Yoga (from `../node_modules/react-native/ReactCommon/yoga`)
 
@@ -424,8 +421,6 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native/Libraries/Vibration"
   ReactCommon:
     :path: "../node_modules/react-native/ReactCommon"
-  RNGestureHandler:
-    :path: "../node_modules/react-native-gesture-handler"
   RNSVG:
     :path: "../node_modules/react-native-svg"
   Yoga:
@@ -470,7 +465,6 @@ SPEC CHECKSUMS:
   React-RCTText: 5c51df3f08cb9dedc6e790161195d12bac06101c
   React-RCTVibration: ae4f914cfe8de7d4de95ae1ea6cc8f6315d73d9d
   ReactCommon: 73d79c7039f473b76db6ff7c6b159c478acbbb3b
-  RNGestureHandler: a479ebd5ed4221a810967000735517df0d2db211
   RNSVG: 551acb6562324b1d52a4e0758f7ca0ec234e278f
   Yoga: 4bd86afe9883422a7c4028c00e34790f560923d6
   YogaKit: f782866e155069a2cca2517aafea43200b01fd5a
diff --git a/example/src/App.tsx b/example/src/App.tsx
index 49a759c..8b2374b 100644
--- a/example/src/App.tsx
+++ b/example/src/App.tsx
@@ -1,13 +1,14 @@
 import * as React from 'react';
 
 import { StyleSheet, Text, SafeAreaView, TouchableOpacity } from 'react-native';
-import EmojiPicker from 'react-native-emoji-keyboard';
+import EmojiPicker from '@jake7/react-native-emoji-keyboard';
+import type { EmojiType } from 'lib/typescript/types';
 
 export default function App() {
   const [result, setResult] = React.useState<string>();
   const [isModalOpen, setIsModalOpen] = React.useState<boolean>(false);
 
-  const handlePick = (emoji: any) => {
+  const handlePick = (emoji: EmojiType) => {
     console.log(emoji);
     setResult(emoji.emoji);
     setIsModalOpen((prev) => !prev);
diff --git a/src/components/EmojiCategory.tsx b/src/components/EmojiCategory.tsx
index 558f4cc..8fb35d7 100644
--- a/src/components/EmojiCategory.tsx
+++ b/src/components/EmojiCategory.tsx
@@ -72,7 +72,7 @@ export const EmojiCategory = ({
         removeClippedSubviews={true}
         getItemLayout={getItemLayout}
         ListFooterComponent={() => <View style={styles.footer} />}
-        windowSize={10}
+        windowSize={20}
       />
     </View>
   );
diff --git a/tsconfig.json b/tsconfig.json
index 4814ae9..cb02c37 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -2,7 +2,7 @@
   "compilerOptions": {
     "baseUrl": "./",
     "paths": {
-      "react-native-emoji-keyboard": ["./src/index"]
+      "@jake7/react-native-emoji-keyboard": ["./src/index"]
     },
     "allowUnreachableCode": false,
     "allowUnusedLabels": false,