Merge pull request #24324 from s-alves10/fix/issue-22939

fix: prevent elastic scrolling when emoji picker is opened
Expensify · Aug 11, 2023 · da2fbe1 · da2fbe1
2 parents 29e6b61 + 4048872
commit da2fbe1
Showing 1 changed file with 10 additions and 1 deletion.
diff --git 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
+                        {overscrollBehaviorY: 'contain'},
+                        // 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]}
                     stickyHeaderIndices={this.state.headerIndices}
                     onScroll={(e) => (this.currentScrollOffset = e.nativeEvent.contentOffset.y)}