From 95e0e45fc7ac484ceeb3e45ba4532013431f0e4c Mon Sep 17 00:00:00 2001
From: Mattermost Build <build@mattermost.com>
Date: Sat, 10 Apr 2021 17:56:37 +0200
Subject: [PATCH] MM-34585 Use removeClippedSubviews from Lists to improve
 scroll perf (#5199) (#5298)

(cherry picked from commit 9c043f1b9f48b4a8d39707863d88e6678f6bae2e)

Co-authored-by: Elias Nahum <nahumhbl@gmail.com>
---
 .../autocomplete/at_mention/at_mention.js     | 11 ++++----
 .../channel_mention/channel_mention.js        | 11 ++++----
 .../emoji_suggestion.test.js.snap             |  2 +-
 .../emoji_suggestion/emoji_suggestion.js      |  1 +
 .../slash_suggestion.test.tsx.snap            |  2 +-
 .../slash_suggestion/slash_suggestion.tsx     |  1 +
 .../__snapshots__/emoji_picker.test.js.snap   |  2 +-
 .../emoji_picker/emoji_picker_base.js         |  9 ++++---
 .../__snapshots__/post_list.test.js.snap      |  6 ++---
 app/components/post_list/post_list.js         |  2 +-
 .../filtered_list/filtered_list.js            |  1 +
 .../list/__snapshots__/list.test.js.snap      |  1 +
 .../sidebars/main/channels_list/list/list.js  |  1 +
 .../sidebars/main/teams_list/teams_list.js    |  1 +
 app/screens/pinned_posts/pinned_posts.js      |  1 +
 .../recent_mentions/recent_mentions.js        |  1 +
 app/screens/saved_posts/saved_posts.js        |  1 +
 .../search/__snapshots__/search.test.js.snap  |  1 +
 app/screens/search/search.js                  |  1 +
 .../select_timezone.test.js.snap              |  2 +-
 .../select_timezone/select_timezone.js        |  1 +
 app/utils/images.js                           | 27 ++++++++++++++-----
 share_extension/screens/channel_list.tsx      |  1 +
 share_extension/screens/team_list.tsx         |  1 +
 24 files changed, 60 insertions(+), 28 deletions(-)

diff --git a/app/components/autocomplete/at_mention/at_mention.js b/app/components/autocomplete/at_mention/at_mention.js
index 1bc74fc01..583a9ffab 100644
--- a/app/components/autocomplete/at_mention/at_mention.js
+++ b/app/components/autocomplete/at_mention/at_mention.js
@@ -251,15 +251,16 @@ export default class AtMention extends PureComponent {
 
         return (
             <SectionList
-                testID='at_mention_suggestion.list'
                 keyboardShouldPersistTaps='always'
                 keyExtractor={this.keyExtractor}
-                style={[style.listView, {maxHeight: maxListHeight}]}
-                sections={sections}
-                renderItem={this.renderItem}
-                renderSectionHeader={this.renderSectionHeader}
                 initialNumToRender={10}
                 nestedScrollEnabled={nestedScrollEnabled}
+                removeClippedSubviews={true}
+                renderItem={this.renderItem}
+                renderSectionHeader={this.renderSectionHeader}
+                style={[style.listView, {maxHeight: maxListHeight}]}
+                sections={sections}
+                testID='at_mention_suggestion.list'
             />
         );
     }
diff --git a/app/components/autocomplete/channel_mention/channel_mention.js b/app/components/autocomplete/channel_mention/channel_mention.js
index 1608446ea..b53a28af5 100644
--- a/app/components/autocomplete/channel_mention/channel_mention.js
+++ b/app/components/autocomplete/channel_mention/channel_mention.js
@@ -225,15 +225,16 @@ export default class ChannelMention extends PureComponent {
 
         return (
             <SectionList
-                testID='channel_mention_suggestion.list'
                 keyboardShouldPersistTaps='always'
                 keyExtractor={this.keyExtractor}
-                style={[style.listView, {maxHeight: maxListHeight}]}
-                sections={sections}
-                renderItem={this.renderItem}
-                renderSectionHeader={this.renderSectionHeader}
                 initialNumToRender={10}
                 nestedScrollEnabled={nestedScrollEnabled}
+                removeClippedSubviews={true}
+                renderItem={this.renderItem}
+                renderSectionHeader={this.renderSectionHeader}
+                style={[style.listView, {maxHeight: maxListHeight}]}
+                sections={sections}
+                testID='channel_mention_suggestion.list'
             />
         );
     }
diff --git a/app/components/autocomplete/emoji_suggestion/__snapshots__/emoji_suggestion.test.js.snap b/app/components/autocomplete/emoji_suggestion/__snapshots__/emoji_suggestion.test.js.snap
index f1b65b105..2bdcc0c85 100644
--- a/app/components/autocomplete/emoji_suggestion/__snapshots__/emoji_suggestion.test.js.snap
+++ b/app/components/autocomplete/emoji_suggestion/__snapshots__/emoji_suggestion.test.js.snap
@@ -3036,7 +3036,7 @@ exports[`components/autocomplete/emoji_suggestion should match snapshot 2`] = `
   numColumns={1}
   onEndReachedThreshold={2}
   pageSize={10}
-  removeClippedSubviews={false}
+  removeClippedSubviews={true}
   renderItem={[Function]}
   scrollEventThrottle={50}
   style={
diff --git a/app/components/autocomplete/emoji_suggestion/emoji_suggestion.js b/app/components/autocomplete/emoji_suggestion/emoji_suggestion.js
index 3f53eac06..da5e8135a 100644
--- a/app/components/autocomplete/emoji_suggestion/emoji_suggestion.js
+++ b/app/components/autocomplete/emoji_suggestion/emoji_suggestion.js
@@ -230,6 +230,7 @@ export default class EmojiSuggestion extends PureComponent {
                 extraData={this.state}
                 data={this.state.dataSource}
                 keyExtractor={this.keyExtractor}
+                removeClippedSubviews={true}
                 renderItem={this.renderItem}
                 pageSize={10}
                 initialListSize={10}
diff --git a/app/components/autocomplete/slash_suggestion/__snapshots__/slash_suggestion.test.tsx.snap b/app/components/autocomplete/slash_suggestion/__snapshots__/slash_suggestion.test.tsx.snap
index adbb00233..e6a7c7a78 100644
--- a/app/components/autocomplete/slash_suggestion/__snapshots__/slash_suggestion.test.tsx.snap
+++ b/app/components/autocomplete/slash_suggestion/__snapshots__/slash_suggestion.test.tsx.snap
@@ -37,7 +37,7 @@ exports[`components/autocomplete/slash_suggestion should match snapshot 1`] = `
   nestedScrollEnabled={false}
   numColumns={1}
   onEndReachedThreshold={2}
-  removeClippedSubviews={false}
+  removeClippedSubviews={true}
   renderItem={[Function]}
   scrollEventThrottle={50}
   style={
diff --git a/app/components/autocomplete/slash_suggestion/slash_suggestion.tsx b/app/components/autocomplete/slash_suggestion/slash_suggestion.tsx
index 305fcf2f2..d5587e3b0 100644
--- a/app/components/autocomplete/slash_suggestion/slash_suggestion.tsx
+++ b/app/components/autocomplete/slash_suggestion/slash_suggestion.tsx
@@ -266,6 +266,7 @@ export default class SlashSuggestion extends PureComponent<Props, State> {
                 extraData={this.state}
                 data={this.state.dataSource}
                 keyExtractor={this.keyExtractor}
+                removeClippedSubviews={true}
                 renderItem={this.renderItem}
                 nestedScrollEnabled={nestedScrollEnabled}
             />
diff --git a/app/components/emoji_picker/__snapshots__/emoji_picker.test.js.snap b/app/components/emoji_picker/__snapshots__/emoji_picker.test.js.snap
index 94cd1bdb5..dbeaadc32 100644
--- a/app/components/emoji_picker/__snapshots__/emoji_picker.test.js.snap
+++ b/app/components/emoji_picker/__snapshots__/emoji_picker.test.js.snap
@@ -103,7 +103,7 @@ exports[`components/emoji_picker/emoji_picker.ios should match snapshot 1`] = `
         onScroll={[Function]}
         onScrollToIndexFailed={[Function]}
         pageSize={50}
-        removeClippedSubviews={false}
+        removeClippedSubviews={true}
         renderItem={[Function]}
         renderSectionHeader={[Function]}
         scrollEventThrottle={50}
diff --git a/app/components/emoji_picker/emoji_picker_base.js b/app/components/emoji_picker/emoji_picker_base.js
index 5bfc3a19f..264c52ee5 100644
--- a/app/components/emoji_picker/emoji_picker_base.js
+++ b/app/components/emoji_picker/emoji_picker_base.js
@@ -264,15 +264,16 @@ export default class EmojiPicker extends PureComponent {
 
             listComponent = (
                 <FlatList
+                    contentContainerStyle={contentContainerStyle}
                     data={filteredEmojis}
-                    initialListSize={10}
                     keyboardShouldPersistTaps='always'
                     keyExtractor={this.flatListKeyExtractor}
+                    initialListSize={10}
+                    ListEmptyComponent={this.renderEmptyList}
                     nativeID={SCROLLVIEW_NATIVE_ID}
                     pageSize={10}
                     renderItem={this.flatListRenderItem}
-                    ListEmptyComponent={this.renderEmptyList}
-                    contentContainerStyle={contentContainerStyle}
+                    removeClippedSubviews={true}
                     style={styles.flatList}
                 />
             );
@@ -292,7 +293,7 @@ export default class EmojiPicker extends PureComponent {
                     onScroll={this.onScroll}
                     onScrollToIndexFailed={this.handleScrollToSectionFailed}
                     pageSize={50}
-                    removeClippedSubviews={false}
+                    removeClippedSubviews={true}
                     renderItem={this.renderItem}
                     renderSectionHeader={this.renderSectionHeader}
                     sections={emojis}
diff --git a/app/components/post_list/__snapshots__/post_list.test.js.snap b/app/components/post_list/__snapshots__/post_list.test.js.snap
index 8df39d6fd..a5c1bf5f7 100644
--- a/app/components/post_list/__snapshots__/post_list.test.js.snap
+++ b/app/components/post_list/__snapshots__/post_list.test.js.snap
@@ -57,7 +57,7 @@ exports[`PostList setting channel deep link 1`] = `
         tintColor="#3d3c40"
       />
     }
-    removeClippedSubviews={false}
+    removeClippedSubviews={true}
     renderItem={[Function]}
     scrollEventThrottle={60}
     style={
@@ -134,7 +134,7 @@ exports[`PostList setting permalink deep link 1`] = `
         tintColor="#3d3c40"
       />
     }
-    removeClippedSubviews={false}
+    removeClippedSubviews={true}
     renderItem={[Function]}
     scrollEventThrottle={60}
     style={
@@ -211,7 +211,7 @@ exports[`PostList should match snapshot 1`] = `
         tintColor="#3d3c40"
       />
     }
-    removeClippedSubviews={false}
+    removeClippedSubviews={true}
     renderItem={[Function]}
     scrollEventThrottle={60}
     style={
diff --git a/app/components/post_list/post_list.js b/app/components/post_list/post_list.js
index 52a75e30f..40c9d1f2b 100644
--- a/app/components/post_list/post_list.js
+++ b/app/components/post_list/post_list.js
@@ -516,7 +516,7 @@ export default class PostList extends PureComponent {
                     onScrollToIndexFailed={this.handleScrollToIndexFailed}
                     ref={this.flatListRef}
                     refreshControl={refreshControl}
-                    removeClippedSubviews={false}
+                    removeClippedSubviews={true}
                     renderItem={this.renderItem}
                     scrollEventThrottle={60}
                     style={styles.flex}
diff --git a/app/components/sidebars/main/channels_list/filtered_list/filtered_list.js b/app/components/sidebars/main/channels_list/filtered_list/filtered_list.js
index d5e18b4fd..266a1bcc2 100644
--- a/app/components/sidebars/main/channels_list/filtered_list/filtered_list.js
+++ b/app/components/sidebars/main/channels_list/filtered_list/filtered_list.js
@@ -383,6 +383,7 @@ class FilteredList extends Component {
             <View style={styles.container}>
                 <SectionList
                     sections={dataSource}
+                    removeClippedSubviews={true}
                     renderItem={this.renderItem}
                     renderSectionHeader={this.renderSectionHeader}
                     keyExtractor={this.keyExtractor}
diff --git a/app/components/sidebars/main/channels_list/list/__snapshots__/list.test.js.snap b/app/components/sidebars/main/channels_list/list/__snapshots__/list.test.js.snap
index 59945edea..43150d13c 100644
--- a/app/components/sidebars/main/channels_list/list/__snapshots__/list.test.js.snap
+++ b/app/components/sidebars/main/channels_list/list/__snapshots__/list.test.js.snap
@@ -21,6 +21,7 @@ exports[`ChannelsList List should match snapshot 1`] = `
     onEndReachedThreshold={2}
     onScrollBeginDrag={[Function]}
     onViewableItemsChanged={[Function]}
+    removeClippedSubviews={true}
     renderItem={[Function]}
     renderSectionHeader={[Function]}
     scrollEventThrottle={50}
diff --git a/app/components/sidebars/main/channels_list/list/list.js b/app/components/sidebars/main/channels_list/list/list.js
index aab8911dd..3f1a6c277 100644
--- a/app/components/sidebars/main/channels_list/list/list.js
+++ b/app/components/sidebars/main/channels_list/list/list.js
@@ -411,6 +411,7 @@ export default class List extends PureComponent {
                     ref={this.setListRef}
                     sections={sections}
                     contentContainerStyle={{paddingBottom}}
+                    removeClippedSubviews={true}
                     renderItem={this.renderItem}
                     renderSectionHeader={this.renderSectionHeader}
                     keyboardShouldPersistTaps={'always'}
diff --git a/app/components/sidebars/main/teams_list/teams_list.js b/app/components/sidebars/main/teams_list/teams_list.js
index 479a26006..80da7ef31 100644
--- a/app/components/sidebars/main/teams_list/teams_list.js
+++ b/app/components/sidebars/main/teams_list/teams_list.js
@@ -179,6 +179,7 @@ export default class TeamsList extends PureComponent {
                     extraData={this.state.serverUrl}
                     contentContainerStyle={this.listContentPadding()}
                     data={teamIds}
+                    removeClippedSubviews={true}
                     renderItem={this.renderItem}
                     keyExtractor={this.keyExtractor}
                     viewabilityConfig={VIEWABILITY_CONFIG}
diff --git a/app/screens/pinned_posts/pinned_posts.js b/app/screens/pinned_posts/pinned_posts.js
index 8044c4a77..35de51d7a 100644
--- a/app/screens/pinned_posts/pinned_posts.js
+++ b/app/screens/pinned_posts/pinned_posts.js
@@ -214,6 +214,7 @@ export default class PinnedPosts extends PureComponent {
                     keyExtractor={this.keyExtractor}
                     keyboardShouldPersistTaps='always'
                     keyboardDismissMode='interactive'
+                    removeClippedSubviews={true}
                     renderItem={this.renderPost}
                     onViewableItemsChanged={this.onViewableItemsChanged}
                 />
diff --git a/app/screens/recent_mentions/recent_mentions.js b/app/screens/recent_mentions/recent_mentions.js
index 831258986..2d0f1b69d 100644
--- a/app/screens/recent_mentions/recent_mentions.js
+++ b/app/screens/recent_mentions/recent_mentions.js
@@ -214,6 +214,7 @@ export default class RecentMentions extends PureComponent {
                     keyExtractor={this.keyExtractor}
                     keyboardShouldPersistTaps='always'
                     keyboardDismissMode='interactive'
+                    removeClippedSubviews={true}
                     renderItem={this.renderPost}
                     onViewableItemsChanged={this.onViewableItemsChanged}
                 />
diff --git a/app/screens/saved_posts/saved_posts.js b/app/screens/saved_posts/saved_posts.js
index f9cdf3a13..febb834a2 100644
--- a/app/screens/saved_posts/saved_posts.js
+++ b/app/screens/saved_posts/saved_posts.js
@@ -219,6 +219,7 @@ export default class SavedPosts extends PureComponent {
                     keyExtractor={this.keyExtractor}
                     keyboardShouldPersistTaps='always'
                     keyboardDismissMode='interactive'
+                    removeClippedSubviews={true}
                     renderItem={this.renderPost}
                     onViewableItemsChanged={this.onViewableItemsChanged}
                 />
diff --git a/app/screens/search/__snapshots__/search.test.js.snap b/app/screens/search/__snapshots__/search.test.js.snap
index 9c6869ff3..9a79d6fcc 100644
--- a/app/screens/search/__snapshots__/search.test.js.snap
+++ b/app/screens/search/__snapshots__/search.test.js.snap
@@ -98,6 +98,7 @@ exports[`Search should match snapshot 1`] = `
       onLayout={[Function]}
       onScroll={[Function]}
       onViewableItemsChanged={[Function]}
+      removeClippedSubviews={true}
       renderSectionHeader={[Function]}
       scrollEventThrottle={60}
       sections={
diff --git a/app/screens/search/search.js b/app/screens/search/search.js
index 4d558eb94..9330d643b 100644
--- a/app/screens/search/search.js
+++ b/app/screens/search/search.js
@@ -747,6 +747,7 @@ export default class Search extends PureComponent {
                     <SectionList
                         ref={this.setListRef}
                         style={style.sectionList}
+                        removeClippedSubviews={true}
                         renderSectionHeader={this.renderSectionHeader}
                         sections={sections}
                         keyboardShouldPersistTaps='always'
diff --git a/app/screens/settings/timezone/select_timezone/__snapshots__/select_timezone.test.js.snap b/app/screens/settings/timezone/select_timezone/__snapshots__/select_timezone.test.js.snap
index e8e8a7ce2..079ed2298 100644
--- a/app/screens/settings/timezone/select_timezone/__snapshots__/select_timezone.test.js.snap
+++ b/app/screens/settings/timezone/select_timezone/__snapshots__/select_timezone.test.js.snap
@@ -78,7 +78,7 @@ exports[`Settings SelectTimezone should match snapshot 1`] = `
     maxToRenderPerBatch={15}
     numColumns={1}
     onEndReachedThreshold={2}
-    removeClippedSubviews={false}
+    removeClippedSubviews={true}
     renderItem={[Function]}
     scrollEventThrottle={50}
     updateCellsBatchingPeriod={50}
diff --git a/app/screens/settings/timezone/select_timezone/select_timezone.js b/app/screens/settings/timezone/select_timezone/select_timezone.js
index bcf093457..bbe331d8c 100644
--- a/app/screens/settings/timezone/select_timezone/select_timezone.js
+++ b/app/screens/settings/timezone/select_timezone/select_timezone.js
@@ -137,6 +137,7 @@ export default class Timezone extends PureComponent {
                 </View>
                 <FlatList
                     data={this.filteredTimezones(value)}
+                    removeClippedSubviews={true}
                     renderItem={this.renderItem}
                     keyExtractor={this.keyExtractor}
                     getItemLayout={this.getItemLayout}
diff --git a/app/utils/images.js b/app/utils/images.js
index 0e0dbacf2..a9d4f720b 100644
--- a/app/utils/images.js
+++ b/app/utils/images.js
@@ -141,16 +141,31 @@ export function openGalleryAtIndex(index, files) {
                 push: {
                     waitForRender: true,
                     sharedElementTransitions,
-                    ...Platform.select({ios: {
-                        content: contentPush,
-                    }}),
-                },
-                pop: {
-                    content: contentPop,
                 },
             },
         };
 
+        if (Object.keys(contentPush).length) {
+            options.animations.push = {
+                ...options.animations.push,
+                ...Platform.select({
+                    android: contentPush,
+                    ios: {
+                        content: contentPush,
+                    },
+                }),
+            };
+        }
+
+        if (Object.keys(contentPop).length) {
+            options.animations.pop = Platform.select({
+                android: contentPop,
+                ios: {
+                    content: contentPop,
+                },
+            });
+        }
+
         goToScreen(screen, '', passProps, options);
     });
 }
diff --git a/share_extension/screens/channel_list.tsx b/share_extension/screens/channel_list.tsx
index 87f040334..b15110767 100644
--- a/share_extension/screens/channel_list.tsx
+++ b/share_extension/screens/channel_list.tsx
@@ -172,6 +172,7 @@ const ChannelList = ({intl}: ChannnelListProps) => {
                 style={styles.flex}
                 sections={sections}
                 ItemSeparatorComponent={renderItemSeparator}
+                removeClippedSubviews={true}
                 renderItem={renderItem}
                 renderSectionHeader={renderSectionHeader}
                 keyExtractor={keyExtractor}
diff --git a/share_extension/screens/team_list.tsx b/share_extension/screens/team_list.tsx
index 56f6ab0f6..447273d83 100644
--- a/share_extension/screens/team_list.tsx
+++ b/share_extension/screens/team_list.tsx
@@ -76,6 +76,7 @@ const TeamList = () => {
             testID='share_extension.team_list.screen'
             data={teams}
             ItemSeparatorComponent={renderItemSeparator}
+            removeClippedSubviews={true}
             renderItem={renderItem}
             keyExtractor={keyExtractor}
             keyboardShouldPersistTaps='always'