From d60002cdd2de2ae8ffed10b5dbc4cbfd135f466e Mon Sep 17 00:00:00 2001
From: Pujan <shahpujan1992@gmail.com>
Date: Thu, 22 Dec 2022 06:58:46 +0530
Subject: [PATCH 1/4] emoji picker menu height changes to display it properly
 and taking advantage of flatlist getItemLayout for fixed height optimization

---
 src/CONST.js                                        | 6 +++---
 src/components/EmojiPicker/EmojiPickerMenu/index.js | 3 +++
 src/styles/styles.js                                | 6 ++++--
 3 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/src/CONST.js b/src/CONST.js
index 58df088ffc19..ef02585f6aed 100755
--- a/src/CONST.js
+++ b/src/CONST.js
@@ -496,11 +496,11 @@ const CONST = {
     ADD_PAYMENT_MENU_POSITION_X: 356,
     EMOJI_PICKER_SIZE: {
         WIDTH: 320,
-        HEIGHT: 400,
+        HEIGHT: 390,
     },
-    NON_NATIVE_EMOJI_PICKER_LIST_HEIGHT: 298,
+    NON_NATIVE_EMOJI_PICKER_LIST_HEIGHT: 288,
     EMOJI_PICKER_ITEM_HEIGHT: 32,
-    EMOJI_PICKER_HEADER_HEIGHT: 38,
+    EMOJI_PICKER_HEADER_HEIGHT: 32,
     COMPOSER_MAX_HEIGHT: 125,
     CHAT_FOOTER_MIN_HEIGHT: 65,
     CHAT_SKELETON_VIEW: {
diff --git a/src/components/EmojiPicker/EmojiPickerMenu/index.js b/src/components/EmojiPicker/EmojiPickerMenu/index.js
index ab68b51802c1..7c7d5fd16ad6 100755
--- a/src/components/EmojiPicker/EmojiPickerMenu/index.js
+++ b/src/components/EmojiPicker/EmojiPickerMenu/index.js
@@ -513,6 +513,9 @@ class EmojiPickerMenu extends Component {
                             }
                             stickyHeaderIndices={this.state.headerIndices}
                             onScroll={e => this.currentScrollOffset = e.nativeEvent.contentOffset.y}
+                            getItemLayout={(data, index) => (
+                                {length: CONST.EMOJI_PICKER_ITEM_HEIGHT, offset: CONST.EMOJI_PICKER_ITEM_HEIGHT * index, index}
+                            )}
                         />
                     )}
                 <EmojiSkinToneList
diff --git a/src/styles/styles.js b/src/styles/styles.js
index dd1496ea1924..56775eed51a5 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -1444,7 +1444,7 @@ const styles = {
     },
 
     emojiPickerList: {
-        height: 300,
+        height: 288,
         width: '100%',
         ...spacing.ph4,
     },
@@ -1455,7 +1455,9 @@ const styles = {
     emojiHeaderStyle: {
         backgroundColor: themeColors.componentBG,
         width: '100%',
-        ...spacing.pv3,
+        height: 32,
+        display: 'flex',
+        alignItems: 'center',
         fontFamily: fontFamily.EXP_NEUE_BOLD,
         fontWeight: fontWeightBold,
         color: themeColors.heading,

From 3e7db85c25845ea07d8936526420c67166995335 Mon Sep 17 00:00:00 2001
From: Pujan <shahpujan1992@gmail.com>
Date: Thu, 22 Dec 2022 09:58:44 +0530
Subject: [PATCH 2/4] getItemLayout function added

---
 .../EmojiPicker/EmojiPickerMenu/index.js           | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/components/EmojiPicker/EmojiPickerMenu/index.js b/src/components/EmojiPicker/EmojiPickerMenu/index.js
index 7c7d5fd16ad6..c5f7d991a23f 100755
--- a/src/components/EmojiPicker/EmojiPickerMenu/index.js
+++ b/src/components/EmojiPicker/EmojiPickerMenu/index.js
@@ -87,6 +87,7 @@ class EmojiPickerMenu extends Component {
         this.onSelectionChange = this.onSelectionChange.bind(this);
         this.updatePreferredSkinTone = this.updatePreferredSkinTone.bind(this);
         this.setFirstNonHeaderIndex = this.setFirstNonHeaderIndex.bind(this);
+        this.getItemLayout = this.getItemLayout.bind(this);
 
         this.currentScrollOffset = 0;
         this.firstNonHeaderIndex = 0;
@@ -414,6 +415,15 @@ class EmojiPickerMenu extends Component {
         User.updatePreferredSkinTone(skinTone);
     }
 
+    /**
+     * @param {*} data
+     * @param {Number} index
+     * @returns {Object}
+     */
+    getItemLayout(data, index) {
+        return {length: CONST.EMOJI_PICKER_ITEM_HEIGHT, offset: CONST.EMOJI_PICKER_ITEM_HEIGHT * index, index};
+    }
+
     /**
      * Given an emoji item object, render a component based on its type.
      * Items with the code "SPACER" return nothing and are used to fill rows up to 8
@@ -513,9 +523,7 @@ class EmojiPickerMenu extends Component {
                             }
                             stickyHeaderIndices={this.state.headerIndices}
                             onScroll={e => this.currentScrollOffset = e.nativeEvent.contentOffset.y}
-                            getItemLayout={(data, index) => (
-                                {length: CONST.EMOJI_PICKER_ITEM_HEIGHT, offset: CONST.EMOJI_PICKER_ITEM_HEIGHT * index, index}
-                            )}
+                            getItemLayout={this.getItemLayout}
                         />
                     )}
                 <EmojiSkinToneList

From 733adc3cd7e284dac03dbdadfc066b12dc91c9f2 Mon Sep 17 00:00:00 2001
From: Pujan <shahpujan1992@gmail.com>
Date: Thu, 22 Dec 2022 10:06:19 +0530
Subject: [PATCH 3/4] lint fix

---
 .../EmojiPicker/EmojiPickerMenu/index.js       | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/components/EmojiPicker/EmojiPickerMenu/index.js b/src/components/EmojiPicker/EmojiPickerMenu/index.js
index c5f7d991a23f..e4f9fbbf6821 100755
--- a/src/components/EmojiPicker/EmojiPickerMenu/index.js
+++ b/src/components/EmojiPicker/EmojiPickerMenu/index.js
@@ -191,6 +191,15 @@ class EmojiPickerMenu extends Component {
         document.addEventListener('mousemove', this.mouseMoveHandler);
     }
 
+    /**
+     * @param {*} data
+     * @param {Number} index
+     * @returns {Object}
+     */
+    getItemLayout(data, index) {
+        return {length: CONST.EMOJI_PICKER_ITEM_HEIGHT, offset: CONST.EMOJI_PICKER_ITEM_HEIGHT * index, index};
+    }
+
     /**
      * Cleanup all mouse/keydown event listeners that we've set up
      */
@@ -415,15 +424,6 @@ class EmojiPickerMenu extends Component {
         User.updatePreferredSkinTone(skinTone);
     }
 
-    /**
-     * @param {*} data
-     * @param {Number} index
-     * @returns {Object}
-     */
-    getItemLayout(data, index) {
-        return {length: CONST.EMOJI_PICKER_ITEM_HEIGHT, offset: CONST.EMOJI_PICKER_ITEM_HEIGHT * index, index};
-    }
-
     /**
      * Given an emoji item object, render a component based on its type.
      * Items with the code "SPACER" return nothing and are used to fill rows up to 8

From ffd02011cc04f5640145d66f52c17d2e56c25c10 Mon Sep 17 00:00:00 2001
From: Pujan <shahpujan1992@gmail.com>
Date: Fri, 23 Dec 2022 07:47:09 +0530
Subject: [PATCH 4/4] comment added

---
 src/components/EmojiPicker/EmojiPickerMenu/index.js | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/components/EmojiPicker/EmojiPickerMenu/index.js b/src/components/EmojiPicker/EmojiPickerMenu/index.js
index e4f9fbbf6821..87e3356b7c72 100755
--- a/src/components/EmojiPicker/EmojiPickerMenu/index.js
+++ b/src/components/EmojiPicker/EmojiPickerMenu/index.js
@@ -192,8 +192,13 @@ class EmojiPickerMenu extends Component {
     }
 
     /**
-     * @param {*} data
-     * @param {Number} index
+     * This function will be used with FlatList getItemLayout property for optimization purpose that allows skipping
+     * the measurement of dynamic content if we know the size (height or width) of items ahead of time.
+     * Generate and return an object with properties length(height of each individual row),
+     * offset(distance of the current row from the top of the FlatList), index(current row index)
+     *
+     * @param {*} data FlatList item
+     * @param {Number} index row index
      * @returns {Object}
      */
     getItemLayout(data, index) {
