@ericvicenti/universe (#4493)

* Isolate modules for uncontainerized navigators

* Clean up prop-types

* Fix warnings and web import friendlyness

* strip a flow

* Standalone provider/consumer navigation context

* export shallowEqual as module

* address various lint

# Conflicts:
#	src/navigators/createStackNavigator.js

* Get tests to pass

package.json

@@ -33,7 +33,6 @@
     "create-react-context": "^0.2.1",
     "hoist-non-react-statics": "^2.2.0",
     "path-to-regexp": "^1.7.0",
-    "prop-types": "^15.5.10",
     "react-lifecycles-compat": "^3",
     "react-native-safe-area-view": "^0.8.0",
     "react-navigation-deprecated-tab-navigator": "1.3.0",

src/__tests__/NavigationContainer-test.js

@@ -5,7 +5,9 @@ import renderer from 'react-test-renderer';
 
 import NavigationActions from '../NavigationActions';
 import createStackNavigator from '../navigators/createStackNavigator';
-import { _TESTING_ONLY_reset_container_count } from '../createNavigationContainer';
+import createNavigationContainer, {
+  _TESTING_ONLY_reset_container_count,
+} from '../createNavigationContainer';
 
 describe('NavigationContainer', () => {
   jest.useFakeTimers();
@@ -19,7 +21,7 @@ describe('NavigationContainer', () => {
   const CarScreen = () => <div />;
   const DogScreen = () => <div />;
   const ElkScreen = () => <div />;
-  const NavigationContainer = createStackNavigator(
+  const Stack = createStackNavigator(
     {
       foo: {
         screen: FooScreen,
@@ -44,6 +46,7 @@ describe('NavigationContainer', () => {
       initialRouteName: 'foo',
     }
   );
+  const NavigationContainer = createNavigationContainer(Stack);
 
   describe('state.nav', () => {
     it("should be preloaded with the router's initial state", () => {
@@ -225,7 +228,7 @@ describe('NavigationContainer', () => {
 
       let spy = spyConsole();
 
-      it('warns when you render more than one navigator explicitly', () => {
+      it('warns when you render more than one container explicitly', () => {
         class BlankScreen extends React.Component {
           render() {
             return <View />;
@@ -242,13 +245,17 @@ describe('NavigationContainer', () => {
           }
         }
 
-        const ChildNavigator = createStackNavigator({
-          Child: BlankScreen,
-        });
+        const ChildNavigator = createNavigationContainer(
+          createStackNavigator({
+            Child: BlankScreen,
+          })
+        );
 
-        const RootStack = createStackNavigator({
-          Root: RootScreen,
-        });
+        const RootStack = createNavigationContainer(
+          createStackNavigator({
+            Root: RootScreen,
+          })
+        );
 
         renderer.create(<RootStack />).toJSON();
         expect(spy).toMatchSnapshot();

src/__tests__/__snapshots__/NavigationContainer-test.js.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`NavigationContainer warnings detached navigators warns when you render more than one navigator explicitly 1`] = `
+exports[`NavigationContainer warnings detached navigators warns when you render more than one container explicitly 1`] = `
 Object {
   "console": [MockFunction] {
     "calls": Array [

src/navigators/__tests__/NestedNavigator-test.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import renderer from 'react-test-renderer';
-import StackNavigator from '../createStackNavigator';
+import StackNavigator from '../createContainedStackNavigator';
 
 const SubNavigator = StackNavigator({
   Home: {

src/navigators/__tests__/StackNavigator-test.js

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import { StyleSheet, View } from 'react-native';
 import renderer from 'react-test-renderer';
 
-import StackNavigator from '../createStackNavigator';
+import StackNavigator from '../createContainedStackNavigator';
 import withNavigation from '../../views/withNavigation';
 import { _TESTING_ONLY_reset_container_count } from '../../createNavigationContainer';
 

src/navigators/__tests__/SwitchNavigator-test.js

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import { View } from 'react-native';
 import renderer from 'react-test-renderer';
 
-import SwitchNavigator from '../createSwitchNavigator';
+import SwitchNavigator from '../createContainedSwitchNavigator';
 
 const A = () => <View />;
 const B = () => <View />;

src/navigators/createContainedStackNavigator.js

@@ -0,0 +1,9 @@
+import createNavigationContainer from '../createNavigationContainer';
+import createStackNavigator from './createStackNavigator';
+
+const StackNavigator = (routeConfigs, config = {}) => {
+  const navigator = createStackNavigator(routeConfigs, config);
+  return createNavigationContainer(navigator);
+};
+
+export default StackNavigator;

src/navigators/createContainedSwitchNavigator.js

@@ -0,0 +1,9 @@
+import createNavigationContainer from '../createNavigationContainer';
+import createSwitchNavigator from './createSwitchNavigator';
+
+const SwitchNavigator = (routeConfigs, config = {}) => {
+  const navigator = createSwitchNavigator(routeConfigs, config);
+  return createNavigationContainer(navigator);
+};
+
+export default SwitchNavigator;

src/navigators/createStackNavigator.js

@@ -1,5 +1,3 @@
-import React from 'react';
-import createNavigationContainer from '../createNavigationContainer';
 import createKeyboardAwareNavigator from './createKeyboardAwareNavigator';
 import createNavigator from './createNavigator';
 import StackView from '../views/StackView/StackView';
@@ -33,8 +31,7 @@ function createStackNavigator(routeConfigMap, stackConfig = {}) {
     Navigator = createKeyboardAwareNavigator(Navigator);
   }
 
-  // HOC to provide the navigation prop for the top-level navigator (when the prop is missing)
-  return createNavigationContainer(Navigator);
+  return Navigator;
 }
 
 export default createStackNavigator;

src/navigators/createSwitchNavigator.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import createNavigationContainer from '../createNavigationContainer';
 import createNavigator from '../navigators/createNavigator';
 import SwitchRouter from '../routers/SwitchRouter';
 import SwitchView from '../views/SwitchView/SwitchView';
@@ -7,7 +6,7 @@ import SwitchView from '../views/SwitchView/SwitchView';
 function createSwitchNavigator(routeConfigMap, switchConfig = {}) {
   const router = SwitchRouter(routeConfigMap, switchConfig);
   const Navigator = createNavigator(SwitchView, router, switchConfig);
-  return createNavigationContainer(Navigator);
+  return Navigator;
 }
 
 export default createSwitchNavigator;

src/react-navigation.js

@@ -17,22 +17,22 @@ module.exports = {
     return require('./navigators/createNavigator').default;
   },
   get createStackNavigator() {
-    return require('./navigators/createStackNavigator').default;
+    return require('./navigators/createContainedStackNavigator').default;
   },
   get StackNavigator() {
     console.warn(
       'The StackNavigator function name is deprecated, please use createStackNavigator instead'
     );
-    return require('./navigators/createStackNavigator').default;
+    return require('./navigators/createContainedStackNavigator').default;
   },
   get createSwitchNavigator() {
-    return require('./navigators/createSwitchNavigator').default;
+    return require('./navigators/createContainedSwitchNavigator').default;
   },
   get SwitchNavigator() {
     console.warn(
       'The SwitchNavigator function name is deprecated, please use createSwitchNavigator instead'
     );
-    return require('./navigators/createSwitchNavigator').default;
+    return require('./navigators/createContainedSwitchNavigator').default;
   },
   get createDrawerNavigator() {
     return require('react-navigation-drawer').createDrawerNavigator;

src/routers/validateRouteConfigMap.js

@@ -21,25 +21,24 @@ function validateRouteConfigMap(routeConfigs) {
         typeof screenComponent !== 'string' &&
         !routeConfig.getScreen)
     ) {
-      throw new Error(
-        `The component for route '${routeName}' must be a ` +
-          'React component. For example:\n\n' +
-          "import MyScreen from './MyScreen';\n" +
-          '...\n' +
-          `${routeName}: MyScreen,\n` +
-          '}\n\n' +
-          'You can also use a navigator:\n\n' +
-          "import MyNavigator from './MyNavigator';\n" +
-          '...\n' +
-          `${routeName}: MyNavigator,\n` +
-          '}'
-      );
+      throw new Error(`The component for route '${routeName}' must be a React component. For example:
+
+import MyScreen from './MyScreen';
+...
+${routeName}: MyScreen,
+}
+
+You can also use a navigator:
+
+import MyNavigator from './MyNavigator';
+...
+${routeName}: MyNavigator,
+}`);
     }
 
     if (routeConfig.screen && routeConfig.getScreen) {
       throw new Error(
-        `Route '${routeName}' should declare a screen or ` +
-          'a getScreen, not both.'
+        `Route '${routeName}' should declare a screen or a getScreen, not both.`
       );
     }
   });

src/utils/invariant.js

@@ -1,14 +1,3 @@
-/**
- * Copyright (c) 2013-present, Facebook, Inc.
- * All rights reserved.
- *
- * This source code is licensed under the BSD-style license found in the
- * LICENSE file in the root directory of this source tree. An additional grant
- * of patent rights can be found in the PATENTS file in the same directory.
- */
-
-'use strict';
-
 /**
  * Use invariant() to assert state which your program assumes to be true.
  *

src/utils/shallowEqual.js

@@ -1,19 +1,5 @@
-/**
- * Copyright (c) 2013-present, Facebook, Inc.
- * All rights reserved.
- *
- * This source code is licensed under the BSD-style license found in the
- * LICENSE file in the root directory of this source tree. An additional grant
- * of patent rights can be found in the PATENTS file in the same directory.
- *
- * @typechecks
- *
- */
-
 /*eslint-disable no-self-compare */
 
-'use strict';
-
 const hasOwnProperty = Object.prototype.hasOwnProperty;
 
 /**
@@ -71,4 +57,4 @@ function shallowEqual(objA, objB) {
   return true;
 }
 
-module.exports = shallowEqual;
+export default shallowEqual;

src/views/NavigationConsumer.js

@@ -0,0 +1,3 @@
+import { NavigationConsumer } from './NavigationContext';
+
+export default NavigationConsumer;

src/views/NavigationContext.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import propTypes from 'prop-types';
 import createReactContext from 'create-react-context';
 
 const NavigationContext = createReactContext();

src/views/NavigationProvider.js

@@ -0,0 +1,3 @@
+import { NavigationProvider } from './NavigationContext';
+
+export default NavigationProvider;

src/views/SceneView.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import propTypes from 'prop-types';
 import { NavigationProvider } from './NavigationContext';
 
 export default class SceneView extends React.PureComponent {

src/views/StackView/StackView.js

@@ -3,7 +3,6 @@ import { NativeModules } from 'react-native';
 
 import StackViewLayout from './StackViewLayout';
 import Transitioner from '../Transitioner';
-import NavigationActions from '../../NavigationActions';
 import StackActions from '../../routers/StackActions';
 import TransitionConfigs from './StackViewTransitionConfigs';
 

src/views/StackView/StackViewLayout.js

@@ -21,7 +21,7 @@ import withOrientation from '../withOrientation';
 import { NavigationProvider } from '../NavigationContext';
 
 import TransitionConfigs from './StackViewTransitionConfigs';
-import * as ReactNativeFeatures from '../../utils/ReactNativeFeatures';
+import { supportsImprovedSpringAnimation } from '../../utils/ReactNativeFeatures';
 
 const emptyFunction = () => {};
 
@@ -154,10 +154,7 @@ class StackViewLayout extends React.Component {
   }
 
   _reset(resetToIndex, duration) {
-    if (
-      Platform.OS === 'ios' &&
-      ReactNativeFeatures.supportsImprovedSpringAnimation()
-    ) {
+    if (Platform.OS === 'ios' && supportsImprovedSpringAnimation()) {
       Animated.spring(this.props.transitionProps.position, {
         toValue: resetToIndex,
         stiffness: 5000,
@@ -197,10 +194,7 @@ class StackViewLayout extends React.Component {
       }
     };
 
-    if (
-      Platform.OS === 'ios' &&
-      ReactNativeFeatures.supportsImprovedSpringAnimation()
-    ) {
+    if (Platform.OS === 'ios' && supportsImprovedSpringAnimation()) {
       Animated.spring(position, {
         toValue,
         stiffness: 5000,
@@ -236,7 +230,7 @@ class StackViewLayout extends React.Component {
         return false;
       }
 
-      position.stopAnimation((value: number) => {
+      position.stopAnimation(value => {
         this._isResponding = true;
         this._gestureStartValue = value;
       });
@@ -244,7 +238,7 @@ class StackViewLayout extends React.Component {
     },
     onMoveShouldSetPanResponder: (event, gesture) => {
       const {
-        transitionProps: { navigation, position, layout, scene, scenes },
+        transitionProps: { navigation, layout, scene },
         mode,
       } = this.props;
       const { index } = navigation.state;
@@ -416,18 +410,10 @@ class StackViewLayout extends React.Component {
       );
     }
     const {
-      transitionProps: { navigation, position, layout, scene, scenes },
+      transitionProps: { scene, scenes },
       mode,
     } = this.props;
-    const { index } = navigation.state;
-    const isVertical = mode === 'modal';
     const { options } = scene.descriptor;
-    const gestureDirection = options.gestureDirection;
-
-    const gestureDirectionInverted =
-      typeof gestureDirection === 'string'
-        ? gestureDirection === 'inverted'
-        : I18nManager.isRTL;
 
     const gesturesEnabled =
       typeof options.gesturesEnabled === 'boolean'

src/views/StackView/StackViewTransitionConfigs.js

@@ -1,9 +1,9 @@
 import { Animated, Easing, Platform } from 'react-native';
 import StyleInterpolator from './StackViewStyleInterpolator';
-import * as ReactNativeFeatures from '../../utils/ReactNativeFeatures';
+import { supportsImprovedSpringAnimation } from '../../utils/ReactNativeFeatures';
 
 let IOSTransitionSpec;
-if (ReactNativeFeatures.supportsImprovedSpringAnimation()) {
+if (supportsImprovedSpringAnimation()) {
   // These are the exact values from UINavigationController's animation configuration
   IOSTransitionSpec = {
     timing: Animated.spring,