From 608365266a11f4e48519ae010106c757a2bf13b7 Mon Sep 17 00:00:00 2001 From: Eric Vicenti Date: Fri, 22 Jun 2018 10:20:27 -0700 Subject: [PATCH] @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 | 1 - src/__tests__/NavigationContainer-test.js | 25 ++++++++++------ .../NavigationContainer-test.js.snap | 2 +- .../__tests__/NestedNavigator-test.js | 2 +- .../__tests__/StackNavigator-test.js | 2 +- .../__tests__/SwitchNavigator-test.js | 2 +- .../createContainedStackNavigator.js | 9 ++++++ .../createContainedSwitchNavigator.js | 9 ++++++ src/navigators/createStackNavigator.js | 5 +--- src/navigators/createSwitchNavigator.js | 3 +- src/react-navigation.js | 8 ++--- src/routers/validateRouteConfigMap.js | 29 +++++++++---------- src/utils/invariant.js | 11 ------- src/utils/shallowEqual.js | 16 +--------- src/views/NavigationConsumer.js | 3 ++ src/views/NavigationContext.js | 1 - src/views/NavigationProvider.js | 3 ++ src/views/SceneView.js | 1 - src/views/StackView/StackView.js | 1 - src/views/StackView/StackViewLayout.js | 26 ++++------------- .../StackView/StackViewTransitionConfigs.js | 4 +-- 21 files changed, 73 insertions(+), 90 deletions(-) create mode 100644 src/navigators/createContainedStackNavigator.js create mode 100644 src/navigators/createContainedSwitchNavigator.js create mode 100644 src/views/NavigationConsumer.js create mode 100644 src/views/NavigationProvider.js diff --git a/package.json b/package.json index 41309343..6c0d7ebb 100644 --- a/package.json +++ b/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", diff --git a/src/__tests__/NavigationContainer-test.js b/src/__tests__/NavigationContainer-test.js index eaa6eac4..355f1ea9 100644 --- a/src/__tests__/NavigationContainer-test.js +++ b/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 = () =>
; const DogScreen = () =>
; const ElkScreen = () =>
; - 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 ; @@ -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().toJSON(); expect(spy).toMatchSnapshot(); diff --git a/src/__tests__/__snapshots__/NavigationContainer-test.js.snap b/src/__tests__/__snapshots__/NavigationContainer-test.js.snap index 61b649de..adf0c36b 100644 --- a/src/__tests__/__snapshots__/NavigationContainer-test.js.snap +++ b/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 [ diff --git a/src/navigators/__tests__/NestedNavigator-test.js b/src/navigators/__tests__/NestedNavigator-test.js index 9fb3ef29..8633bb3c 100644 --- a/src/navigators/__tests__/NestedNavigator-test.js +++ b/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: { diff --git a/src/navigators/__tests__/StackNavigator-test.js b/src/navigators/__tests__/StackNavigator-test.js index bbb032cf..fb83d069 100644 --- a/src/navigators/__tests__/StackNavigator-test.js +++ b/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'; diff --git a/src/navigators/__tests__/SwitchNavigator-test.js b/src/navigators/__tests__/SwitchNavigator-test.js index d3d1adbf..da28dfc1 100644 --- a/src/navigators/__tests__/SwitchNavigator-test.js +++ b/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 = () => ; const B = () => ; diff --git a/src/navigators/createContainedStackNavigator.js b/src/navigators/createContainedStackNavigator.js new file mode 100644 index 00000000..ddf5fc0c --- /dev/null +++ b/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; diff --git a/src/navigators/createContainedSwitchNavigator.js b/src/navigators/createContainedSwitchNavigator.js new file mode 100644 index 00000000..545860cc --- /dev/null +++ b/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; diff --git a/src/navigators/createStackNavigator.js b/src/navigators/createStackNavigator.js index d95319fd..50453ca0 100644 --- a/src/navigators/createStackNavigator.js +++ b/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; diff --git a/src/navigators/createSwitchNavigator.js b/src/navigators/createSwitchNavigator.js index 7f240565..9e12d83f 100644 --- a/src/navigators/createSwitchNavigator.js +++ b/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; diff --git a/src/react-navigation.js b/src/react-navigation.js index b0a15940..500b4e56 100644 --- a/src/react-navigation.js +++ b/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; diff --git a/src/routers/validateRouteConfigMap.js b/src/routers/validateRouteConfigMap.js index 686b4509..1d7de486 100644 --- a/src/routers/validateRouteConfigMap.js +++ b/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.` ); } }); diff --git a/src/utils/invariant.js b/src/utils/invariant.js index d635184f..ef63437c 100644 --- a/src/utils/invariant.js +++ b/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. * diff --git a/src/utils/shallowEqual.js b/src/utils/shallowEqual.js index 6e8a2a41..65aeaa8d 100644 --- a/src/utils/shallowEqual.js +++ b/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; diff --git a/src/views/NavigationConsumer.js b/src/views/NavigationConsumer.js new file mode 100644 index 00000000..a04c4edd --- /dev/null +++ b/src/views/NavigationConsumer.js @@ -0,0 +1,3 @@ +import { NavigationConsumer } from './NavigationContext'; + +export default NavigationConsumer; diff --git a/src/views/NavigationContext.js b/src/views/NavigationContext.js index 1c8c81ea..d3265fb1 100644 --- a/src/views/NavigationContext.js +++ b/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(); diff --git a/src/views/NavigationProvider.js b/src/views/NavigationProvider.js new file mode 100644 index 00000000..94c17bac --- /dev/null +++ b/src/views/NavigationProvider.js @@ -0,0 +1,3 @@ +import { NavigationProvider } from './NavigationContext'; + +export default NavigationProvider; diff --git a/src/views/SceneView.js b/src/views/SceneView.js index de68dc0b..248f61a3 100644 --- a/src/views/SceneView.js +++ b/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 { diff --git a/src/views/StackView/StackView.js b/src/views/StackView/StackView.js index a3a5c56a..6f3cb87c 100644 --- a/src/views/StackView/StackView.js +++ b/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'; diff --git a/src/views/StackView/StackViewLayout.js b/src/views/StackView/StackViewLayout.js index d0aedfe7..fdbe3ec3 100644 --- a/src/views/StackView/StackViewLayout.js +++ b/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' diff --git a/src/views/StackView/StackViewTransitionConfigs.js b/src/views/StackView/StackViewTransitionConfigs.js index 8407e50d..b21c41b9 100644 --- a/src/views/StackView/StackViewTransitionConfigs.js +++ b/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,