From cf6ef7f7477ba55b27b911a1e428a94393a65b9a Mon Sep 17 00:00:00 2001
From: Lucas Feijo <lucas.feijo@powerhrg.com>
Date: Wed, 29 Jan 2020 14:24:41 -0500
Subject: [PATCH 1/2] Calculate width based design using the container

instead of the size of the device it's running on. This fixes the issue of not being able to use this component inside a modal or essentially anything that's not filling the whole screen.
---
 index.js | 26 +++++++++++++-------------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/index.js b/index.js
index e2bba1b..52a5910 100644
--- a/index.js
+++ b/index.js
@@ -7,7 +7,6 @@ import {
   TouchableOpacity,
   TextInput,
   Platform,
-  Dimensions,
   ActivityIndicator,
   AsyncStorage,
   FlatList
@@ -65,10 +64,9 @@ const filteredEmojis = emoji.filter(e => !e["obsoleted_by"]);
 const emojiByCategory = category =>
   filteredEmojis.filter(e => e.category === category);
 const sortEmoji = list => list.sort((a, b) => a.sort_order - b.sort_order);
-const { width } = Dimensions.get("screen");
 const categoryKeys = Object.keys(Categories);
 
-const TabBar = ({ theme, activeCategory, onPress }) => {
+const TabBar = ({ theme, activeCategory, onPress, width }) => {
   const tabSize = width / categoryKeys.length;
 
   return categoryKeys.map(c => {
@@ -126,7 +124,8 @@ export default class EmojiSelector extends Component {
     isReady: false,
     history: [],
     emojiList: null,
-    colSize: 0
+    colSize: 0,
+    width: 0
   };
 
   //
@@ -243,12 +242,20 @@ export default class EmojiSelector extends Component {
     this.setState(
       {
         emojiList,
-        colSize: Math.floor(width / this.props.columns)
+        colSize: Math.floor(this.state.width / this.props.columns)
       },
       cb
     );
   }
 
+  handleLayout = ({ nativeEvent: { layout } }) => {
+    this.setState({ width: layout.width }, () => {
+      this.prerenderEmojis(() => {
+        this.setState({ isReady: true });
+      });
+    })
+  };
+
   //
   //  LIFECYCLE METHODS
   //
@@ -259,14 +266,6 @@ export default class EmojiSelector extends Component {
     if (showHistory) {
       this.loadHistoryAsync();
     }
-
-    this.prerenderEmojis(() => {
-      this.setState({ isReady: true });
-    });
-  }
-
-  handleLayout = ({ nativeEvent: { layout: { width: layoutWidth } } }) => {
-    this.setState({ colSize: Math.floor(layoutWidth / this.props.columns) });
   }
 
   render() {
@@ -308,6 +307,7 @@ export default class EmojiSelector extends Component {
               activeCategory={category}
               onPress={this.handleTabSelect}
               theme={theme}
+              width={this.state.width}
             />
           )}
         </View>

From c25b42967f54e82948cdbf7f3327068b408cc8f9 Mon Sep 17 00:00:00 2001
From: Lucas Feijo <lucas.feijo@powerhrg.com>
Date: Wed, 29 Jan 2020 14:35:08 -0500
Subject: [PATCH 2/2] Increment version

---
 package.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 3883c31..04511d7 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-native-emoji-selector",
-  "version": "0.1.7",
+  "version": "0.1.8",
   "description": "A react native emoji selector",
   "main": "index.js",
   "scripts": {
@@ -19,6 +19,6 @@
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/arronhunt/react-native-emoji-selector.git"
+    "url": "git+https://github.com/lucasfeijo/react-native-emoji-selector.git"
   }
 }