From 22eb27fe8efb6111a19ad9b2b0abc15f38ceff1f Mon Sep 17 00:00:00 2001
From: s-alves10 <sangar.work1028@gmail.com>
Date: Wed, 9 Aug 2023 10:39:36 -0500
Subject: [PATCH 1/4] fix: prevent elastic scrolling when emoji picker is
 opened

---
 src/components/EmojiPicker/EmojiPickerMenu/index.js | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/components/EmojiPicker/EmojiPickerMenu/index.js b/src/components/EmojiPicker/EmojiPickerMenu/index.js
index dfa06e8daab2..86902b39b133 100755
--- a/src/components/EmojiPicker/EmojiPickerMenu/index.js
+++ b/src/components/EmojiPicker/EmojiPickerMenu/index.js
@@ -524,6 +524,9 @@ class EmojiPickerMenu extends Component {
 
     render() {
         const isFiltered = this.emojis.length !== this.state.filteredEmojis.length;
+        const listStyle = StyleUtils.getEmojiPickerListHeight(isFiltered, this.props.windowHeight);
+        const height = (!listStyle.maxHeight || listStyle.height < listStyle.maxHeight) ? listStyle.height : listStyle.maxHeight;
+        const overflowLimit = Math.floor(height / CONST.EMOJI_PICKER_ITEM_HEIGHT) * 8;
         return (
             <View
                 style={[styles.emojiPickerContainer, StyleUtils.getEmojiPickerStyle(this.props.isSmallScreenWidth)]}
@@ -557,7 +560,13 @@ class EmojiPickerMenu extends Component {
                     renderItem={this.renderItem}
                     keyExtractor={this.keyExtractor}
                     numColumns={CONST.EMOJI_NUM_PER_ROW}
-                    style={StyleUtils.getEmojiPickerListHeight(isFiltered, this.props.windowHeight)}
+                    style={[
+                        listStyle,
+                        // This prevents elastic scrolling when scroll reaches the start or end
+                        {overscrollBehavior: 'contain'},
+                        // Set overflow to hidden to prevent elastic scrolling when there is no enough contents to scroll in FlatList
+                        {overflow: this.state.filteredEmojis.length > overflowLimit ? 'auto' : 'hidden'},
+                    ]}
                     extraData={[this.state.filteredEmojis, this.state.highlightedIndex, this.props.preferredSkinTone]}
                     stickyHeaderIndices={this.state.headerIndices}
                     onScroll={(e) => (this.currentScrollOffset = e.nativeEvent.contentOffset.y)}

From d68ea9374aeea690f2c43d574d883b497b0708fe Mon Sep 17 00:00:00 2001
From: s-alves10 <sangar.work1028@gmail.com>
Date: Wed, 9 Aug 2023 10:49:51 -0500
Subject: [PATCH 2/4] fix: prettier

---
 src/components/EmojiPicker/EmojiPickerMenu/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/EmojiPicker/EmojiPickerMenu/index.js b/src/components/EmojiPicker/EmojiPickerMenu/index.js
index 86902b39b133..a49cd940d5d3 100755
--- a/src/components/EmojiPicker/EmojiPickerMenu/index.js
+++ b/src/components/EmojiPicker/EmojiPickerMenu/index.js
@@ -525,7 +525,7 @@ class EmojiPickerMenu extends Component {
     render() {
         const isFiltered = this.emojis.length !== this.state.filteredEmojis.length;
         const listStyle = StyleUtils.getEmojiPickerListHeight(isFiltered, this.props.windowHeight);
-        const height = (!listStyle.maxHeight || listStyle.height < listStyle.maxHeight) ? listStyle.height : listStyle.maxHeight;
+        const height = !listStyle.maxHeight || listStyle.height < listStyle.maxHeight ? listStyle.height : listStyle.maxHeight;
         const overflowLimit = Math.floor(height / CONST.EMOJI_PICKER_ITEM_HEIGHT) * 8;
         return (
             <View

From 3b27a5904710e40fda76df2aaf51f86a3e1503eb Mon Sep 17 00:00:00 2001
From: s-alves10 <sangar.work1028@gmail.com>
Date: Fri, 11 Aug 2023 03:30:12 -0500
Subject: [PATCH 3/4] fix: apply overflow only to Y axis

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

diff --git a/src/components/EmojiPicker/EmojiPickerMenu/index.js b/src/components/EmojiPicker/EmojiPickerMenu/index.js
index a49cd940d5d3..e941ec1defe1 100755
--- a/src/components/EmojiPicker/EmojiPickerMenu/index.js
+++ b/src/components/EmojiPicker/EmojiPickerMenu/index.js
@@ -563,9 +563,9 @@ class EmojiPickerMenu extends Component {
                     style={[
                         listStyle,
                         // This prevents elastic scrolling when scroll reaches the start or end
-                        {overscrollBehavior: 'contain'},
+                        {overscrollBehaviorY: 'contain'},
                         // Set overflow to hidden to prevent elastic scrolling when there is no enough contents to scroll in FlatList
-                        {overflow: this.state.filteredEmojis.length > overflowLimit ? 'auto' : 'hidden'},
+                        {overflowY: this.state.filteredEmojis.length > overflowLimit ? 'auto' : 'hidden'},
                     ]}
                     extraData={[this.state.filteredEmojis, this.state.highlightedIndex, this.props.preferredSkinTone]}
                     stickyHeaderIndices={this.state.headerIndices}

From 40488728e6b30803efa345914046e00405e0914d Mon Sep 17 00:00:00 2001
From: s-alves10 <sangar.work1028@gmail.com>
Date: Fri, 11 Aug 2023 10:14:51 -0500
Subject: [PATCH 4/4] fix: comments

---
 src/components/EmojiPicker/EmojiPickerMenu/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/EmojiPicker/EmojiPickerMenu/index.js b/src/components/EmojiPicker/EmojiPickerMenu/index.js
index e941ec1defe1..6e2856a7e058 100755
--- a/src/components/EmojiPicker/EmojiPickerMenu/index.js
+++ b/src/components/EmojiPicker/EmojiPickerMenu/index.js
@@ -564,7 +564,7 @@ class EmojiPickerMenu extends Component {
                         listStyle,
                         // This prevents elastic scrolling when scroll reaches the start or end
                         {overscrollBehaviorY: 'contain'},
-                        // Set overflow to hidden to prevent elastic scrolling when there is no enough contents to scroll in FlatList
+                        // Set overflow to hidden to prevent elastic scrolling when there are not enough contents to scroll in FlatList
                         {overflowY: this.state.filteredEmojis.length > overflowLimit ? 'auto' : 'hidden'},
                     ]}
                     extraData={[this.state.filteredEmojis, this.state.highlightedIndex, this.props.preferredSkinTone]}