Update network inspector to have smarter scroll stickiness (#21952)

Summary:
When making use of the network inspector on a react-native app, it can be quite annoying that as new requests come in the network inspector instantly sticks to the bottom.

This PR makes this logic smarter by allowing the user to be scrolled away from the bottom by two rows to override this automatic scrolling to the bottom logic.
Pull Request resolved: #21952

Differential Revision: D14162762

Pulled By: cpojer

fbshipit-source-id: ad49858509dd74a817ebabab54fdacc99773bf22

Libraries/Inspector/NetworkOverlay.js

@@ -88,6 +88,16 @@ class NetworkOverlay extends React.Component<Props, State> {
   _requestsListView: ?React.ElementRef<typeof FlatList>;
   _detailScrollView: ?React.ElementRef<typeof ScrollView>;
 
+  // Metrics are used to decide when if the request list should be sticky, and
+  // scroll to the bottom as new network requests come in, or if the user has
+  // intentionally scrolled away from the bottom - to instead flash the scroll bar
+  // and keep the current position
+  _requestsListViewScrollMetrics = {
+    offset: 0,
+    visibleLength: 0,
+    contentLength: 0,
+  };
+
   // Map of `socketId` -> `index in `this.state.requests`.
   _socketIdMap = {};
   // Map of `xhr._index` -> `index in `this.state.requests`.
@@ -121,7 +131,7 @@ class NetworkOverlay extends React.Component<Props, State> {
         {
           requests: this.state.requests.concat(_xhr),
         },
-        this._scrollRequestsToBottom,
+        this._indicateAdditionalRequests,
       );
     });
 
@@ -214,7 +224,7 @@ class NetworkOverlay extends React.Component<Props, State> {
           {
             requests: this.state.requests.concat(_webSocket),
           },
-          this._scrollRequestsToBottom,
+          this._indicateAdditionalRequests,
         );
       },
     );
@@ -383,11 +393,35 @@ class NetworkOverlay extends React.Component<Props, State> {
     );
   }
 
-  _scrollRequestsToBottom(): void {
+  _indicateAdditionalRequests = (): void => {
     if (this._requestsListView) {
-      this._requestsListView.scrollToEnd();
+      const distanceFromEndThreshold = LISTVIEW_CELL_HEIGHT * 2;
+      const {
+        offset,
+        visibleLength,
+        contentLength,
+      } = this._requestsListViewScrollMetrics;
+      const distanceFromEnd = contentLength - visibleLength - offset;
+      const isCloseToEnd = distanceFromEnd <= distanceFromEndThreshold;
+      if (isCloseToEnd) {
+        this._requestsListView.scrollToEnd();
+      } else {
+        this._requestsListView.flashScrollIndicators();
+      }
     }
-  }
+  };
+
+  _captureRequestsListView = (listRef: ?FlatList<NetworkRequestInfo>): void => {
+    this._requestsListView = listRef;
+  };
+
+  _requestsListViewOnScroll = (e: Object): void => {
+    this._requestsListViewScrollMetrics.offset = e.nativeEvent.contentOffset.y;
+    this._requestsListViewScrollMetrics.visibleLength =
+      e.nativeEvent.layoutMeasurement.height;
+    this._requestsListViewScrollMetrics.contentLength =
+      e.nativeEvent.contentSize.height;
+  };
 
   /**
    * Popup a scrollView to dynamically show detailed information of
@@ -446,7 +480,8 @@ class NetworkOverlay extends React.Component<Props, State> {
         </View>
 
         <FlatList
-          ref={listRef => (this._requestsListView = listRef)}
+          ref={this._captureRequestsListView}
+          onScroll={this._requestsListViewOnScroll}
           style={styles.listView}
           data={requests}
           renderItem={this._renderItem}