MM-27354 Emit the event for visible items in the thread screen (#4961)

* Emit the event for visible items in the thread screen

* Feedback review

* fix unit test

* check for deeplink before running the animation

* Load progressive image for recent mentions, saved / pinned posts & search

app/components/post_list/__snapshots__/post_list.test.js.snap

@@ -44,7 +44,7 @@ exports[`PostList setting channel deep link 1`] = `
     onLayout={[Function]}
     onScroll={[Function]}
     onScrollToIndexFailed={[Function]}
-    onViewableItemsChanged={null}
+    onViewableItemsChanged={[Function]}
     refreshControl={
       <RefreshControlMock
         colors={
@@ -121,7 +121,7 @@ exports[`PostList setting permalink deep link 1`] = `
     onLayout={[Function]}
     onScroll={[Function]}
     onScrollToIndexFailed={[Function]}
-    onViewableItemsChanged={null}
+    onViewableItemsChanged={[Function]}
     refreshControl={
       <RefreshControlMock
         colors={
@@ -198,7 +198,7 @@ exports[`PostList should match snapshot 1`] = `
     onLayout={[Function]}
     onScroll={[Function]}
     onScrollToIndexFailed={[Function]}
-    onViewableItemsChanged={null}
+    onViewableItemsChanged={[Function]}
     refreshControl={
       <RefreshControlMock
         colors={

app/components/post_list/post_list.js

@@ -451,17 +451,22 @@ export default class PostList extends PureComponent {
     }
 
     onViewableItemsChanged = ({viewableItems}) => {
-        if (!this.onViewableItemsChangedListener || !viewableItems.length || this.props.deepLinkURL) {
+        if (!viewableItems.length) {
             return;
         }
+
         const viewableItemsMap = viewableItems.reduce((acc, {item, isViewable}) => {
             if (isViewable) {
                 acc[item] = true;
             }
             return acc;
         }, {});
+
         DeviceEventEmitter.emit('scrolled', viewableItemsMap);
-        this.onViewableItemsChangedListener(viewableItems);
+
+        if (this.onViewableItemsChangedListener && !this.props.deepLinkURL) {
+            this.onViewableItemsChangedListener(viewableItems);
+        }
     }
 
     render() {
@@ -521,7 +526,7 @@ export default class PostList extends PureComponent {
                         itemVisiblePercentThreshold: 1,
                         minimumViewTime: 100,
                     }}
-                    onViewableItemsChanged={showMoreMessagesButton ? this.onViewableItemsChanged : null}
+                    onViewableItemsChanged={this.onViewableItemsChanged}
                 />
                 {showMoreMessagesButton &&
                     <MoreMessagesButton

app/screens/flagged_posts/flagged_posts.js

@@ -5,6 +5,7 @@ import React, {PureComponent} from 'react';
 import PropTypes from 'prop-types';
 import {intlShape} from 'react-intl';
 import {
+    DeviceEventEmitter,
     Keyboard,
     FlatList,
     StyleSheet,
@@ -111,6 +112,21 @@ export default class FlaggedPosts extends PureComponent {
 
     keyExtractor = (item) => item;
 
+    onViewableItemsChanged = ({viewableItems}) => {
+        if (!viewableItems.length) {
+            return;
+        }
+
+        const viewableItemsMap = viewableItems.reduce((acc, {item, isViewable}) => {
+            if (isViewable) {
+                acc[item] = true;
+            }
+            return acc;
+        }, {});
+
+        DeviceEventEmitter.emit('scrolled', viewableItemsMap);
+    };
+
     previewPost = (post) => {
         const {showPermalink} = this.props.actions;
         Keyboard.dismiss();
@@ -203,6 +219,7 @@ export default class FlaggedPosts extends PureComponent {
                     keyboardShouldPersistTaps='always'
                     keyboardDismissMode='interactive'
                     renderItem={this.renderPost}
+                    onViewableItemsChanged={this.onViewableItemsChanged}
                 />
             );
         } else {

app/screens/pinned_posts/pinned_posts.js

@@ -5,6 +5,7 @@ import React, {PureComponent} from 'react';
 import PropTypes from 'prop-types';
 import {intlShape} from 'react-intl';
 import {
+    DeviceEventEmitter,
     Keyboard,
     FlatList,
     StyleSheet,
@@ -112,6 +113,21 @@ export default class PinnedPosts extends PureComponent {
 
     keyExtractor = (item) => item;
 
+    onViewableItemsChanged = ({viewableItems}) => {
+        if (!viewableItems.length) {
+            return;
+        }
+
+        const viewableItemsMap = viewableItems.reduce((acc, {item, isViewable}) => {
+            if (isViewable) {
+                acc[item] = true;
+            }
+            return acc;
+        }, {});
+
+        DeviceEventEmitter.emit('scrolled', viewableItemsMap);
+    };
+
     previewPost = (post) => {
         this.props.actions.showPermalink(this.context.intl, '', post.id, false);
     };
@@ -199,6 +215,7 @@ export default class PinnedPosts extends PureComponent {
                     keyboardShouldPersistTaps='always'
                     keyboardDismissMode='interactive'
                     renderItem={this.renderPost}
+                    onViewableItemsChanged={this.onViewableItemsChanged}
                 />
             );
         } else {

app/screens/recent_mentions/recent_mentions.js

@@ -5,6 +5,7 @@ import React, {PureComponent} from 'react';
 import PropTypes from 'prop-types';
 import {intlShape} from 'react-intl';
 import {
+    DeviceEventEmitter,
     Keyboard,
     FlatList,
     StyleSheet,
@@ -111,6 +112,21 @@ export default class RecentMentions extends PureComponent {
         }
     }
 
+    onViewableItemsChanged = ({viewableItems}) => {
+        if (!viewableItems.length) {
+            return;
+        }
+
+        const viewableItemsMap = viewableItems.reduce((acc, {item, isViewable}) => {
+            if (isViewable) {
+                acc[item] = true;
+            }
+            return acc;
+        }, {});
+
+        DeviceEventEmitter.emit('scrolled', viewableItemsMap);
+    };
+
     previewPost = (post) => {
         this.props.actions.showPermalink(this.context.intl, '', post.id, false);
     };
@@ -198,6 +214,7 @@ export default class RecentMentions extends PureComponent {
                     keyboardShouldPersistTaps='always'
                     keyboardDismissMode='interactive'
                     renderItem={this.renderPost}
+                    onViewableItemsChanged={this.onViewableItemsChanged}
                 />
             );
         } else {

app/screens/search/search.js

@@ -7,6 +7,7 @@ import React, {PureComponent} from 'react';
 import PropTypes from 'prop-types';
 import {intlShape} from 'react-intl';
 import {
+    DeviceEventEmitter,
     Keyboard,
     Platform,
     SafeAreaView,
@@ -330,6 +331,22 @@ export default class Search extends PureComponent {
         }
     }, 100);
 
+    onViewableItemsChanged = ({viewableItems}) => {
+        const visible = viewableItems.filter((item) => item.section.key === 'results');
+        if (!visible.length) {
+            return;
+        }
+
+        const viewableItemsMap = visible.reduce((acc, {item, isViewable}) => {
+            if (isViewable) {
+                acc[item] = true;
+            }
+            return acc;
+        }, {});
+
+        DeviceEventEmitter.emit('scrolled', viewableItemsMap);
+    };
+
     previewPost = (post) => {
         this.props.actions.showPermalink(this.context.intl, '', post.id, false);
     };
@@ -753,6 +770,7 @@ export default class Search extends PureComponent {
                         onScroll={this.handleScroll}
                         scrollEventThrottle={60}
                         ListFooterComponent={this.renderFooter}
+                        onViewableItemsChanged={this.onViewableItemsChanged}
                     />
                     <Autocomplete
                         cursorPosition={cursorPosition}

ios/Podfile.lock

@@ -445,7 +445,7 @@ DEPENDENCIES:
   - Yoga (from `../node_modules/react-native/ReactCommon/yoga`)
 
 SPEC REPOS:
-  https://github.com/CocoaPods/Specs.git:
+  trunk:
     - boost-for-react-native
     - libwebp
     - MMKV