Bump @react-navigation/native and re-export scroll related modules

react-navigation · Oct 23, 2018 · 77c30d5 · 77c30d5
1 parent 93ce7f4
commit 77c30d5
Show file tree

Hide file tree

Showing 7 changed files with 81 additions and 127 deletions.
diff --git a/examples/NavigationPlayground/js/SimpleTabs.js b/examples/NavigationPlayground/js/SimpleTabs.js
@@ -8,8 +8,10 @@ import type {
 } from 'react-navigation';
 
 import React from 'react';
-import { Platform, Text, ScrollView, StatusBar, View } from 'react-native';
+import { Animated, Platform, Text, StatusBar, View } from 'react-native';
 import {
+  ScrollView,
+  FlatList,
   SafeAreaView,
   createBottomTabNavigator,
   withNavigation,
@@ -18,53 +20,12 @@ import Ionicons from 'react-native-vector-icons/Ionicons';
 import SampleText from './SampleText';
 import { Button } from './commonComponents/ButtonWithMargin';
 
-class NavigationAwareScrollView extends React.Component {
-  componentDidMount() {
-    this.props.navigation.addListener('willFocus', () => {
-      this._isFocused = true;
-    });
-
-    this.props.navigation.addListener('willBlur', () => {
-      this._isFocused = false;
-    });
-
-    this.props.navigation.addListener('refocus', () => {
-      if (this._isFocused) {
-        this._component.scrollTo({ x: 0, y: 0 });
-      }
-    });
-  }
-
-  setNativeProps(props) {
-    this._component.setNativeProps(props);
-  }
-
-  _setComponentRef(c) {
-    this._component = c;
-  }
-
-  getNode() {
-    return this._component;
-  }
-
-  render() {
-    return (
-      <ScrollView
-        {...this.props}
-        ref={view => {
-          this._component = view;
-        }}
-      />
-    );
-  }
-}
-
 const TEXT = `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla a hendrerit dui, id consectetur nulla. Curabitur mattis sapien nunc, quis dignissim eros venenatis sit amet. Praesent rutrum dapibus diam quis eleifend. Donec vulputate quis purus sed vulputate. Fusce ipsum felis, cursus at congue vel, consectetur tincidunt purus. Pellentesque et fringilla lorem. In at augue malesuada, sollicitudin ex ut, convallis elit. Curabitur metus nibh, consequat vel libero sit amet, iaculis congue nisl. Maecenas eleifend sodales sapien, fringilla sagittis nisi ornare volutpat. Integer tellus enim, volutpat vitae nisl et, dignissim pharetra leo. Sed sit amet efficitur sapien, at tristique sapien. Aenean dignissim semper sagittis. Nullam sit amet volutpat mi.
 Curabitur auctor orci et justo molestie iaculis. Integer elementum tortor ac ipsum egestas pharetra. Etiam ultrices elementum pharetra. Maecenas lobortis ultrices risus dignissim luctus. Nunc malesuada cursus posuere. Vestibulum tristique lectus pretium pellentesque pellentesque. Nunc ac nisi lacus. Duis ultrices dui ac viverra ullamcorper. Morbi placerat laoreet lacus sit amet ullamcorper.
 Nulla convallis pulvinar hendrerit. Nulla mattis sem et aliquam ultrices. Nam egestas magna leo, nec luctus turpis sollicitudin ac. Sed id leo luctus, lobortis tortor ut, rhoncus ex. Aliquam gravida enim ac dapibus ultricies. Vestibulum at interdum est, et vehicula nibh. Phasellus dignissim iaculis rhoncus. Vestibulum tempus leo lectus, quis euismod metus ullamcorper quis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut id ipsum at enim eleifend porttitor id quis metus. Proin bibendum ornare iaculis. Duis elementum lacus vel cursus efficitur. Nunc eu tortor sed risus lacinia scelerisque.
 Praesent lobortis elit sit amet mauris pulvinar, viverra condimentum massa pellentesque. Curabitur massa ex, dignissim eget neque at, fringilla consectetur justo. Cras sollicitudin vel ligula sed cursus. Aliquam porta sem hendrerit diam porta ultricies. Sed eu mi erat. Curabitur id justo vel tortor hendrerit vestibulum id eget est. Morbi eros magna, placerat id diam ut, varius sollicitudin mi. Curabitur pretium finibus accumsan.`;
 const MyNavScreen = ({ navigation, banner }) => (
-  <NavigationAwareScrollView navigation={navigation} style={{ flex: 1 }}>
+  <ScrollView navigation={navigation} style={{ flex: 1 }}>
     <SafeAreaView forceInset={{ horizontal: 'always', top: 'always' }}>
       <SampleText>{banner}</SampleText>
       <Button
@@ -76,12 +37,28 @@ const MyNavScreen = ({ navigation, banner }) => (
         title="Go to settings tab"
       />
       <Button onPress={() => navigation.goBack(null)} title="Go back" />
-      {TEXT.split('\n').map(p => (
-        <Text style={{ marginVertical: 10, marginHorizontal: 8 }}>{p}</Text>
+      {TEXT.split('\n').map((p, n) => (
+        <Text key={n} style={{ marginVertical: 10, marginHorizontal: 8 }}>
+          {p}
+        </Text>
       ))}
       <StatusBar barStyle="default" />
     </SafeAreaView>
-  </NavigationAwareScrollView>
+  </ScrollView>
+);
+
+const MyListScreen = ({ navigation, data }) => (
+  <FlatList
+    navigation={navigation}
+    data={TEXT.split('\n')}
+    style={{ paddingTop: 10 }}
+    keyExtractor={(item, index) => index.toString()}
+    renderItem={({ item }) => (
+      <Text style={{ fontSize: 16, marginVertical: 10, marginHorizontal: 8 }}>
+        {item}
+      </Text>
+    )}
+  />
 );
 
 const MyHomeScreen = ({ navigation }) => (
@@ -102,6 +79,7 @@ MyHomeScreen.navigationOptions = {
     />
   ),
 };
+MyListScreen.navigationOptions = MyHomeScreen.navigationOptions;
 
 type MyPeopleScreenProps = {
   navigation: NavigationScreenProp<*>,
@@ -123,16 +101,16 @@ class MyPeopleScreen extends React.Component<MyPeopleScreenProps> {
     ),
   };
   componentDidMount() {
-    this._s0 = this.props.navigation.addListener('willFocus', this._onEvent);
-    this._s1 = this.props.navigation.addListener('didFocus', this._onEvent);
-    this._s2 = this.props.navigation.addListener('willBlur', this._onEvent);
-    this._s3 = this.props.navigation.addListener('didBlur', this._onEvent);
+    // this._s0 = this.props.navigation.addListener('willFocus', this._onEvent);
+    // this._s1 = this.props.navigation.addListener('didFocus', this._onEvent);
+    // this._s2 = this.props.navigation.addListener('willBlur', this._onEvent);
+    // this._s3 = this.props.navigation.addListener('didBlur', this._onEvent);
   }
   componentWillUnmount() {
-    this._s0.remove();
-    this._s1.remove();
-    this._s2.remove();
-    this._s3.remove();
+    // this._s0.remove();
+    // this._s1.remove();
+    // this._s2.remove();
+    // this._s3.remove();
   }
   _onEvent = a => {
     console.log('EVENT ON PEOPLE TAB', a.type, a);
@@ -163,16 +141,16 @@ class MyChatScreen extends React.Component<MyChatScreenProps> {
     ),
   };
   componentDidMount() {
-    this._s0 = this.props.navigation.addListener('willFocus', this._onEvent);
-    this._s1 = this.props.navigation.addListener('didFocus', this._onEvent);
-    this._s2 = this.props.navigation.addListener('willBlur', this._onEvent);
-    this._s3 = this.props.navigation.addListener('didBlur', this._onEvent);
+    // this._s0 = this.props.navigation.addListener('willFocus', this._onEvent);
+    // this._s1 = this.props.navigation.addListener('didFocus', this._onEvent);
+    // this._s2 = this.props.navigation.addListener('willBlur', this._onEvent);
+    // this._s3 = this.props.navigation.addListener('didBlur', this._onEvent);
   }
   componentWillUnmount() {
-    this._s0.remove();
-    this._s1.remove();
-    this._s2.remove();
-    this._s3.remove();
+    // this._s0.remove();
+    // this._s1.remove();
+    // this._s2.remove();
+    // this._s3.remove();
   }
   _onEvent = a => {
     console.log('EVENT ON CHAT TAB', a.type, a);
@@ -201,7 +179,7 @@ MySettingsScreen.navigationOptions = {
 const SimpleTabs = createBottomTabNavigator(
   {
     Home: {
-      screen: MyHomeScreen,
+      screen: MyListScreen,
       path: '',
     },
     People: {
@@ -236,16 +214,16 @@ class SimpleTabsContainer extends React.Component<SimpleTabsContainerProps> {
   _s3: NavigationEventSubscription;
 
   componentDidMount() {
-    this._s0 = this.props.navigation.addListener('willFocus', this._onAction);
-    this._s1 = this.props.navigation.addListener('didFocus', this._onAction);
-    this._s2 = this.props.navigation.addListener('willBlur', this._onAction);
-    this._s3 = this.props.navigation.addListener('didBlur', this._onAction);
+    // this._s0 = this.props.navigation.addListener('willFocus', this._onAction);
+    // this._s1 = this.props.navigation.addListener('didFocus', this._onAction);
+    // this._s2 = this.props.navigation.addListener('willBlur', this._onAction);
+    // this._s3 = this.props.navigation.addListener('didBlur', this._onAction);
   }
   componentWillUnmount() {
-    this._s0.remove();
-    this._s1.remove();
-    this._s2.remove();
-    this._s3.remove();
+    // this._s0.remove();
+    // this._s1.remove();
+    // this._s2.remove();
+    // this._s3.remove();
   }
   _onAction = a => {
     console.log('TABS EVENT', a.type, a);

diff --git a/examples/NavigationPlayground/js/StacksInTabs.js b/examples/NavigationPlayground/js/StacksInTabs.js
@@ -3,8 +3,9 @@
  */
 
 import React from 'react';
-import { ScrollView, StatusBar, Text } from 'react-native';
+import { StatusBar, Text } from 'react-native';
 import {
+  ScrollView,
   SafeAreaView,
   createStackNavigator,
   createBottomTabNavigator,
@@ -15,46 +16,6 @@ import Ionicons from 'react-native-vector-icons/Ionicons';
 import SampleText from './SampleText';
 import { Button } from './commonComponents/ButtonWithMargin';
 
-@withNavigation
-class NavigationAwareScrollView extends React.Component {
-  componentDidMount() {
-    this.props.navigation.addListener('willFocus', () => {
-      this._isFocused = true;
-    });
-
-    this.props.navigation.addListener('willBlur', () => {
-      this._isFocused = false;
-    });
-
-    this.props.navigation.addListener('refocus', () => {
-      this._component.scrollTo({ x: 0, y: 0 });
-    });
-  }
-
-  setNativeProps(props) {
-    this._component.setNativeProps(props);
-  }
-
-  _setComponentRef(c) {
-    this._component = c;
-  }
-
-  getNode() {
-    return this._component;
-  }
-
-  render() {
-    return (
-      <ScrollView
-        {...this.props}
-        ref={view => {
-          this._component = view;
-        }}
-      />
-    );
-  }
-}
-
 const TEXT = `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla a hendrerit dui, id consectetur nulla. Curabitur mattis sapien nunc, quis dignissim eros venenatis sit amet. Praesent rutrum dapibus diam quis eleifend. Donec vulputate quis purus sed vulputate. Fusce ipsum felis, cursus at congue vel, consectetur tincidunt purus. Pellentesque et fringilla lorem. In at augue malesuada, sollicitudin ex ut, convallis elit. Curabitur metus nibh, consequat vel libero sit amet, iaculis congue nisl. Maecenas eleifend sodales sapien, fringilla sagittis nisi ornare volutpat. Integer tellus enim, volutpat vitae nisl et, dignissim pharetra leo. Sed sit amet efficitur sapien, at tristique sapien. Aenean dignissim semper sagittis. Nullam sit amet volutpat mi.
 Curabitur auctor orci et justo molestie iaculis. Integer elementum tortor ac ipsum egestas pharetra. Etiam ultrices elementum pharetra. Maecenas lobortis ultrices risus dignissim luctus. Nunc malesuada cursus posuere. Vestibulum tristique lectus pretium pellentesque pellentesque. Nunc ac nisi lacus. Duis ultrices dui ac viverra ullamcorper. Morbi placerat laoreet lacus sit amet ullamcorper.
 Nulla convallis pulvinar hendrerit. Nulla mattis sem et aliquam ultrices. Nam egestas magna leo, nec luctus turpis sollicitudin ac. Sed id leo luctus, lobortis tortor ut, rhoncus ex. Aliquam gravida enim ac dapibus ultricies. Vestibulum at interdum est, et vehicula nibh. Phasellus dignissim iaculis rhoncus. Vestibulum tempus leo lectus, quis euismod metus ullamcorper quis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut id ipsum at enim eleifend porttitor id quis metus. Proin bibendum ornare iaculis. Duis elementum lacus vel cursus efficitur. Nunc eu tortor sed risus lacinia scelerisque.
@@ -64,7 +25,7 @@ class MyNavScreen extends React.Component {
   render() {
     const { banner, navigation } = this.props;
     return (
-      <NavigationAwareScrollView style={{ flex: 1 }}>
+      <ScrollView style={{ flex: 1 }}>
         <SafeAreaView forceInset={{ horizontal: 'always' }}>
           <SampleText>{banner}</SampleText>
           <Button
@@ -89,7 +50,7 @@ class MyNavScreen extends React.Component {
         </SafeAreaView>
 
         <StatusBar barStyle="default" />
-      </NavigationAwareScrollView>
+      </ScrollView>
     );
   }
 }

diff --git a/examples/NavigationPlayground/package.json b/examples/NavigationPlayground/package.json
@@ -10,7 +10,9 @@
     "test": "flow"
   },
   "dependencies": {
+    "@react-navigation/native": "^3.0.0-alpha.8",
     "expo": "^30.0.0",
+    "hoist-non-react-statics": "^3.0.1",
     "invariant": "^2.2.4",
     "react": "16.3.1",
     "react-native": "^0.55.0",

diff --git a/examples/NavigationPlayground/yarn.lock b/examples/NavigationPlayground/yarn.lock
@@ -528,11 +528,12 @@
     react-is "^16.5.2"
     react-lifecycles-compat "^3.0.4"
 
-"@react-navigation/native@^3.0.0-alpha.7":
-  version "3.0.0-alpha.7"
-  resolved "https://registry.yarnpkg.com/@react-navigation/native/-/native-3.0.0-alpha.7.tgz#c3286b6334b1fee155ed7ee6aa5a5e0786ecc77f"
-  integrity sha512-x1yORQTShdUugdc6lxPZH2t7RL3oBIGLfnBBLz1/fZQCkzvb8rBxrGB1Ebtwix7Alxb8tscE8+rBfpwpCd6ehw==
+"@react-navigation/native@^3.0.0-alpha.8":
+  version "3.0.0-alpha.8"
+  resolved "https://registry.yarnpkg.com/@react-navigation/native/-/native-3.0.0-alpha.8.tgz#19dc5f0d38b1c1a0e465d9907fb964f682b30c30"
+  integrity sha512-m/azkNgbt5KA4sOtXNdZDd3xdWKfJT2nzPxNsbnvji81/yUKB2MgXUpuPH4d2CApusr3LqIu/1NDMY6+3gQj2w==
   dependencies:
+    hoist-non-react-statics "^3.0.1"
     react-native-safe-area-view "^0.11.0"
 
 abab@^2.0.0:

diff --git a/package.json b/package.json
@@ -35,7 +35,7 @@
   },
   "dependencies": {
     "@react-navigation/core": "^3.0.0-alpha.12",
-    "@react-navigation/native": "^3.0.0-alpha.7",
+    "@react-navigation/native": "^3.0.0-alpha.8",
     "react-navigation-drawer": "1.0.0-alpha.5",
     "react-navigation-stack": "1.0.0-alpha.23",
     "react-navigation-tabs": "1.0.0-alpha.4"

diff --git a/src/react-navigation.js b/src/react-navigation.js
@@ -14,16 +14,27 @@ module.exports = {
   get createKeyboardAwareNavigator() {
     return require('@react-navigation/native').createKeyboardAwareNavigator;
   },
+  get createNavigationAwareScrollable() {
+    return require('@react-navigation/native').createNavigationAwareScrollable;
+  },
+  get ScrollView() {
+    return require('@react-navigation/native').ScrollView;
+  },
+  get FlatList() {
+    return require('@react-navigation/native').FlatList;
+  },
+  get SectionList() {
+    return require('@react-navigation/native').SectionList;
+  },
   get ResourceSavingSceneView() {
     return require('@react-navigation/native').ResourceSavingSceneView;
   },
-  get withOrientation() {
-    return require('@react-navigation/native').withOrientation;
-  },
-
   get SafeAreaView() {
     return require('@react-navigation/native').SafeAreaView;
   },
+  get withOrientation() {
+    return require('@react-navigation/native').withOrientation;
+  },
 
   // Core
   get createNavigator() {

diff --git a/yarn.lock b/yarn.lock
@@ -58,11 +58,12 @@
     react-is "^16.5.2"
     react-lifecycles-compat "^3.0.4"
 
-"@react-navigation/native@^3.0.0-alpha.7":
-  version "3.0.0-alpha.7"
-  resolved "https://registry.yarnpkg.com/@react-navigation/native/-/native-3.0.0-alpha.7.tgz#c3286b6334b1fee155ed7ee6aa5a5e0786ecc77f"
-  integrity sha512-x1yORQTShdUugdc6lxPZH2t7RL3oBIGLfnBBLz1/fZQCkzvb8rBxrGB1Ebtwix7Alxb8tscE8+rBfpwpCd6ehw==
+"@react-navigation/native@^3.0.0-alpha.8":
+  version "3.0.0-alpha.8"
+  resolved "https://registry.yarnpkg.com/@react-navigation/native/-/native-3.0.0-alpha.8.tgz#19dc5f0d38b1c1a0e465d9907fb964f682b30c30"
+  integrity sha512-m/azkNgbt5KA4sOtXNdZDd3xdWKfJT2nzPxNsbnvji81/yUKB2MgXUpuPH4d2CApusr3LqIu/1NDMY6+3gQj2w==
   dependencies:
+    hoist-non-react-statics "^3.0.1"
     react-native-safe-area-view "^0.11.0"
 
 "@sindresorhus/is@^0.7.0":