Add createNavigationAwareScrollable, ScrollView, FlatList, and SectionList

packages/native/package.json

@@ -90,6 +90,7 @@
     "singleQuote": true
   },
   "dependencies": {
+    "hoist-non-react-statics": "^3.0.1",
     "react-native-safe-area-view": "^0.11.0"
   }
 }

packages/native/src/Scrollables.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import { FlatList, SectionList } from 'react-native';
+import { ScrollView } from 'react-native-gesture-handler';
+import createNavigationAwareScrollable from './createNavigationAwareScrollable';
+
+const WrappedScrollView = createNavigationAwareScrollable(ScrollView);
+
+const WrappedFlatList = React.forwardRef((props, ref) => (
+  <FlatList
+    ref={ref}
+    {...props}
+    renderScrollComponent={props => <WrappedScrollView {...props} />}
+  />
+));
+
+const WrappedSectionList = React.forwardRef((props, ref) => (
+  <SectionList
+    ref={ref}
+    {...props}
+    renderScrollComponent={props => <WrappedScrollView {...props} />}
+  />
+));
+
+module.exports = {
+  ScrollView: WrappedScrollView,
+  FlatList: WrappedFlatList,
+  SectionList: WrappedSectionList,
+};

packages/native/src/createNavigationAwareScrollable.js

@@ -0,0 +1,61 @@
+import React from 'react';
+import hoistStatics from 'hoist-non-react-statics';
+import { withNavigation } from '@react-navigation/core';
+
+export default function createNavigationAwareScrollable(Component: any) {
+  class ComponentWithNavigationScrolling extends React.PureComponent<any> {
+    static displayName = `NavigationAwareScrollable(${Component.displayName ||
+      Component.name})`;
+
+    _subscription: any;
+
+    componentDidMount() {
+      this._subscription = this.props.navigation.addListener('refocus', () => {
+        const scrollableNode = this.getNode();
+        if (this.props.navigation.isFocused() && scrollableNode !== null) {
+          if (scrollableNode.scrollToTop != null) {
+            scrollableNode.scrollToTop();
+          } else if (scrollableNode.scrollTo != null) {
+            scrollableNode.scrollTo({ y: 0 });
+          }
+        }
+      });
+    }
+
+    getNode() {
+      if (this._scrollRef === null) {
+        return null;
+      }
+
+      if (this._scrollRef.getScrollResponder) {
+        return this._scrollRef.getScrollResponder();
+      } else if (this._scrollRef.getNode) {
+        return this._scrollRef.getNode();
+      } else {
+        return this._scrollRef;
+      }
+    }
+
+    componentWillUnmount() {
+      if (this._subscription != null) {
+        this._subscription.remove();
+      }
+    }
+
+    render() {
+      return (
+        <Component
+          ref={view => {
+            this._scrollRef = view;
+          }}
+          {...this.props}
+        />
+      );
+    }
+  }
+
+  return hoistStatics(
+    withNavigation(ComponentWithNavigationScrolling),
+    Component
+  );
+}

packages/native/src/index.js

@@ -4,19 +4,36 @@ module.exports = {
   get createAppContainer() {
     return require('./createAppContainer').default;
   },
+
   get createKeyboardAwareNavigator() {
     return require('./createKeyboardAwareNavigator').default;
   },
 
-  get ResourceSavingSceneView() {
-    return require('./ResourceSavingSceneView').default;
+  get createNavigationAwareScrollable() {
+    return require('./createNavigationAwareScrollable').default;
   },
 
   get withOrientation() {
     return require('./withOrientation').default;
   },
 
+  get ResourceSavingSceneView() {
+    return require('./ResourceSavingSceneView').default;
+  },
+
   get SafeAreaView() {
     return require('react-native-safe-area-view').default;
   },
+
+  get ScrollView() {
+    return require('./Scrollables').ScrollView;
+  },
+
+  get FlatList() {
+    return require('./Scrollables').FlatList;
+  },
+
+  get SectionList() {
+    return require('./Scrollables').SectionList;
+  },
 };