Fix Stacks over Tabs example

* Fix drawer router initial state

* Add test

* Be concise

README.md

@@ -1,6 +1,6 @@
 # React Navigation
 
-[![npm version](https://badge.fury.io/js/react-navigation.svg)](https://badge.fury.io/js/react-navigation) [![codecov](https://codecov.io/gh/react-community/react-navigation/branch/master/graph/badge.svg)](https://codecov.io/gh/react-community/react-navigation) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://reactnavigation.org/docs/contributing.html)
+[![npm version](https://badge.fury.io/js/react-navigation.svg)](https://badge.fury.io/js/react-navigation) [![codecov](https://codecov.io/gh/react-navigation/react-navigation/branch/master/graph/badge.svg)](https://codecov.io/gh/react-navigation/react-navigation) [![CircleCI badge](https://circleci.com/gh/react-navigation/react-navigation/tree/master.svg?style=shield)](https://circleci.com/gh/react-navigation/react-navigation/tree/master) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://reactnavigation.org/docs/contributing.html)
 
 React Navigation is born from the React Native community's need for an extensible yet easy-to-use navigation solution based on Javascript.
 

examples/NavigationPlayground/app.json

@@ -11,7 +11,7 @@
     "splash": {
       "image": "./assets/icons/splash.png"
     },
-    "sdkVersion": "26.0.0",
+    "sdkVersion": "27.0.0",
     "entryPoint": "./node_modules/react-native-scripts/build/bin/crna-entry.js",
     "packagerOpts": {
       "assetExts": [

examples/NavigationPlayground/js/SimpleStack.js

@@ -16,6 +16,8 @@ import {
   SafeAreaView,
   withNavigation,
 } from 'react-navigation';
+import invariant from 'invariant';
+
 import SampleText from './SampleText';
 import { Button } from './commonComponents/ButtonWithMargin';
 import { HeaderButtons } from './commonComponents/HeaderButtons';
@@ -48,11 +50,16 @@ const MyBackButtonWithNavigation = withNavigation(MyBackButton);
 class MyNavScreen extends React.Component<MyNavScreenProps> {
   render() {
     const { navigation, banner } = this.props;
+    const { push, replace, popToTop, pop, dismiss } = navigation;
+    invariant(
+      push && replace && popToTop && pop && dismiss,
+      'missing action creators for StackNavigator'
+    );
     return (
       <SafeAreaView>
         <SampleText>{banner}</SampleText>
         <Button
-          onPress={() => navigation.push('Profile', { name: 'Jane' })}
+          onPress={() => push('Profile', { name: 'Jane' })}
           title="Push a profile screen"
         />
         <Button
@@ -60,13 +67,13 @@ class MyNavScreen extends React.Component<MyNavScreenProps> {
           title="Navigate to a photos screen"
         />
         <Button
-          onPress={() => navigation.replace('Profile', { name: 'Lucy' })}
+          onPress={() => replace('Profile', { name: 'Lucy' })}
           title="Replace with profile"
         />
-        <Button onPress={() => navigation.popToTop()} title="Pop to top" />
-        <Button onPress={() => navigation.pop()} title="Pop" />
+        <Button onPress={() => popToTop()} title="Pop to top" />
+        <Button onPress={() => pop()} title="Pop" />
         <Button onPress={() => navigation.goBack()} title="Go back" />
-        <Button onPress={() => navigation.dismiss()} title="Dismiss" />
+        <Button onPress={() => dismiss()} title="Dismiss" />
         <StatusBar barStyle="default" />
       </SafeAreaView>
     );

examples/NavigationPlayground/js/StackWithHeaderPreset.js

@@ -6,6 +6,8 @@ import type { NavigationScreenProp } from 'react-navigation';
 import * as React from 'react';
 import { ScrollView, StatusBar } from 'react-native';
 import { createStackNavigator, SafeAreaView } from 'react-navigation';
+import invariant from 'invariant';
+
 import { Button } from './commonComponents/ButtonWithMargin';
 
 type NavScreenProps = {
@@ -19,15 +21,14 @@ class HomeScreen extends React.Component<NavScreenProps> {
 
   render() {
     const { navigation } = this.props;
+    const { push } = navigation;
+    invariant(push, 'missing `push` action creator for StackNavigator');
 
     return (
       <SafeAreaView style={{ paddingTop: 30 }}>
+        <Button onPress={() => push('Other')} title="Push another screen" />
         <Button
-          onPress={() => navigation.push('Other')}
-          title="Push another screen"
-        />
-        <Button
-          onPress={() => navigation.push('ScreenWithNoHeader')}
+          onPress={() => push('ScreenWithNoHeader')}
           title="Push screen with no header"
         />
         <Button onPress={() => navigation.goBack(null)} title="Go Home" />
@@ -44,18 +45,20 @@ class OtherScreen extends React.Component<NavScreenProps> {
 
   render() {
     const { navigation } = this.props;
+    const { push, pop } = navigation;
+    invariant(push && pop, 'missing action creators for StackNavigator');
 
     return (
       <SafeAreaView style={{ paddingTop: 30 }}>
         <Button
-          onPress={() => navigation.push('ScreenWithLongTitle')}
+          onPress={() => push('ScreenWithLongTitle')}
           title="Push another screen"
         />
         <Button
-          onPress={() => navigation.push('ScreenWithNoHeader')}
+          onPress={() => push('ScreenWithNoHeader')}
           title="Push screen with no header"
         />
-        <Button onPress={() => navigation.pop()} title="Pop" />
+        <Button onPress={() => pop()} title="Pop" />
         <Button onPress={() => navigation.goBack(null)} title="Go back" />
         <StatusBar barStyle="default" />
       </SafeAreaView>
@@ -70,10 +73,12 @@ class ScreenWithLongTitle extends React.Component<NavScreenProps> {
 
   render() {
     const { navigation } = this.props;
+    const { pop } = navigation;
+    invariant(pop, 'missing `pop` action creator for StackNavigator');
 
     return (
       <SafeAreaView style={{ paddingTop: 30 }}>
-        <Button onPress={() => navigation.pop()} title="Pop" />
+        <Button onPress={() => pop()} title="Pop" />
         <Button onPress={() => navigation.goBack(null)} title="Go back" />
         <StatusBar barStyle="default" />
       </SafeAreaView>
@@ -89,14 +94,13 @@ class ScreenWithNoHeader extends React.Component<NavScreenProps> {
 
   render() {
     const { navigation } = this.props;
+    const { push, pop } = navigation;
+    invariant(push && pop, 'missing action creators for StackNavigator');
 
     return (
       <SafeAreaView style={{ paddingTop: 30 }}>
-        <Button
-          onPress={() => navigation.push('Other')}
-          title="Push another screen"
-        />
-        <Button onPress={() => navigation.pop()} title="Pop" />
+        <Button onPress={() => push('Other')} title="Push another screen" />
+        <Button onPress={() => pop()} title="Pop" />
         <Button onPress={() => navigation.goBack(null)} title="Go back" />
         <StatusBar barStyle="default" />
       </SafeAreaView>

examples/NavigationPlayground/js/StackWithTranslucentHeader.js

@@ -19,6 +19,8 @@ import {
   View,
 } from 'react-native';
 import { Header, createStackNavigator } from 'react-navigation';
+import invariant from 'invariant';
+
 import SampleText from './SampleText';
 import { Button } from './commonComponents/ButtonWithMargin';
 import { HeaderButtons } from './commonComponents/HeaderButtons';
@@ -31,11 +33,16 @@ type MyNavScreenProps = {
 class MyNavScreen extends React.Component<MyNavScreenProps> {
   render() {
     const { navigation, banner } = this.props;
+    const { push, replace, popToTop, pop } = navigation;
+    invariant(
+      push && replace && popToTop && pop,
+      'missing action creators for StackNavigator'
+    );
     return (
       <ScrollView style={{ flex: 1 }} {...this.getHeaderInset()}>
         <SampleText>{banner}</SampleText>
         <Button
-          onPress={() => navigation.push('Profile', { name: 'Jane' })}
+          onPress={() => push('Profile', { name: 'Jane' })}
           title="Push a profile screen"
         />
         <Button
@@ -43,11 +50,11 @@ class MyNavScreen extends React.Component<MyNavScreenProps> {
           title="Navigate to a photos screen"
         />
         <Button
-          onPress={() => navigation.replace('Profile', { name: 'Lucy' })}
+          onPress={() => replace('Profile', { name: 'Lucy' })}
           title="Replace with profile"
         />
-        <Button onPress={() => navigation.popToTop()} title="Pop to top" />
-        <Button onPress={() => navigation.pop()} title="Pop" />
+        <Button onPress={() => popToTop()} title="Pop to top" />
+        <Button onPress={() => pop()} title="Pop" />
         <Button onPress={() => navigation.goBack(null)} title="Go back" />
         <StatusBar barStyle="default" />
       </ScrollView>

examples/NavigationPlayground/js/StacksOverTabs.js

@@ -94,6 +94,19 @@ const TabNav = createBottomTabNavigator(
   }
 );
 
+TabNav.navigationOptions = ({ navigation }) => {
+  let { routeName } = navigation.state.routes[navigation.state.index];
+  let title;
+  if (routeName === 'SettingsTab') {
+    title = 'Settings';
+  } else if (routeName === 'MainTab') {
+    title = 'Home';
+  }
+  return {
+    title,
+  };
+};
+
 const StacksOverTabs = createStackNavigator({
   Root: {
     screen: TabNav,
@@ -107,9 +120,9 @@ const StacksOverTabs = createStackNavigator({
   Profile: {
     screen: MyProfileScreen,
     path: '/people/:name',
-    navigationOptions: ({ navigation }) => {
-      title: `${navigation.state.params.name}'s Profile!`;
-    },
+    navigationOptions: ({ navigation }) => ({
+      title: `${navigation.state.params.name}'s Profile!`,
+    }),
   },
 });
 

examples/NavigationPlayground/package.json

@@ -11,9 +11,10 @@
     "test": "flow"
   },
   "dependencies": {
-    "expo": "^26.0.0",
-    "react": "16.3.0-alpha.1",
-    "react-native": "^0.54.0",
+    "expo": "^27.0.0",
+    "invariant": "^2.2.4",
+    "react": "16.3.1",
+    "react-native": "^0.55.0",
     "react-native-iphone-x-helper": "^1.0.2",
     "react-navigation": "link:../..",
     "react-navigation-header-buttons": "^0.0.4",

examples/ReduxExample/src/navigators/AppNavigator.js

@@ -2,11 +2,12 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { StackNavigator } from 'react-navigation';
+import { initializeListeners } from 'react-navigation-redux-helpers';
 
 import LoginScreen from '../components/LoginScreen';
 import MainScreen from '../components/MainScreen';
 import ProfileScreen from '../components/ProfileScreen';
-import { addListener } from '../utils/redux';
+import { navigationPropConstructor } from '../utils/redux';
 
 export const AppNavigator = StackNavigator({
   Login: { screen: LoginScreen },
@@ -20,17 +21,14 @@ class AppWithNavigationState extends React.Component {
     nav: PropTypes.object.isRequired,
   };
 
+  componentDidMount() {
+    initializeListeners('root', this.props.nav);
+  }
+
   render() {
     const { dispatch, nav } = this.props;
-    return (
-      <AppNavigator
-        navigation={{
-          dispatch,
-          state: nav,
-          addListener,
-        }}
-      />
-    );
+    const navigation = navigationPropConstructor(dispatch, nav);
+    return <AppNavigator navigation={navigation} />;
   }
 }
 

examples/ReduxExample/src/utils/redux.js

@@ -1,15 +1,12 @@
 import {
   createReactNavigationReduxMiddleware,
-  createReduxBoundAddListener,
+  createNavigationPropConstructor,
 } from 'react-navigation-redux-helpers';
 
 const middleware = createReactNavigationReduxMiddleware(
-  "root",
-  state => state.nav,
+  'root',
+  state => state.nav
 );
-const addListener = createReduxBoundAddListener("root");
+const navigationPropConstructor = createNavigationPropConstructor('root');
 
-export {
-  middleware,
-  addListener,
-};
+export { middleware, navigationPropConstructor };

flow/react-navigation.js

@@ -269,21 +269,26 @@ declare module 'react-navigation' {
 
   declare export type NavigationComponent =
     | NavigationScreenComponent<NavigationRoute, *, *>
-    | NavigationContainer<*, *, *>
-    | any;
+    | NavigationContainer<*, *, *>;
 
   declare export type NavigationScreenComponent<
     Route: NavigationRoute,
     Options: {},
     Props: {}
-  > = React$ComponentType<NavigationNavigatorProps<Options, Route> & Props> &
+  > = React$ComponentType<{
+    ...Props,
+    ...NavigationNavigatorProps<Options, Route>,
+  }> &
     ({} | { navigationOptions: NavigationScreenConfig<Options> });
 
   declare export type NavigationNavigator<
     State: NavigationState,
     Options: {},
     Props: {}
-  > = React$ComponentType<NavigationNavigatorProps<Options, State> & Props> & {
+  > = React$ComponentType<{
+    ...Props,
+    ...NavigationNavigatorProps<Options, State>,
+  }> & {
     router: NavigationRouter<State, Options>,
     navigationOptions?: ?NavigationScreenConfig<Options>,
   };
@@ -426,10 +431,9 @@ declare module 'react-navigation' {
       | ((options: { tintColor: ?string, focused: boolean }) => ?React$Node),
     tabBarVisible?: boolean,
     tabBarTestIDProps?: { testID?: string, accessibilityLabel?: string },
-    tabBarOnPress?: (
-      scene: TabScene,
-      jumpToIndex: (index: number) => void
-    ) => void,
+    tabBarOnPress?: ({
+      navigation: NavigationScreenProp<NavigationRoute>,
+    }) => void,
   |};
 
   /**
@@ -485,8 +489,14 @@ declare module 'react-navigation' {
   declare export type NavigationScreenProp<+S> = {
     +state: S,
     dispatch: NavigationDispatch,
+    addListener: (
+      eventName: string,
+      callback: NavigationEventCallback
+    ) => NavigationEventSubscription,
+    getParam: (paramName: string, fallback?: any) => any,
+    isFocused: () => boolean,
+    // Shared action creators that exist for all routers
     goBack: (routeKey?: ?string) => boolean,
-    dismiss: () => boolean,
     navigate: (
       routeName:
         | string
@@ -500,24 +510,25 @@ declare module 'react-navigation' {
       action?: NavigationNavigateAction
     ) => boolean,
     setParams: (newParams: NavigationParams) => boolean,
-    getParam: (paramName: string, fallback?: any) => any,
-    addListener: (
-      eventName: string,
-      callback: NavigationEventCallback
-    ) => NavigationEventSubscription,
-    push: (
+    // StackRouter action creators
+    pop?: (n?: number, params?: { immediate?: boolean }) => boolean,
+    popToTop?: (params?: { immediate?: boolean }) => boolean,
+    push?: (
       routeName: string,
       params?: NavigationParams,
       action?: NavigationNavigateAction
     ) => boolean,
-    replace: (
+    replace?: (
       routeName: string,
       params?: NavigationParams,
       action?: NavigationNavigateAction
     ) => boolean,
-    pop: (n?: number, params?: { immediate?: boolean }) => boolean,
-    popToTop: (params?: { immediate?: boolean }) => boolean,
-    isFocused: () => boolean,
+    reset?: (actions: NavigationAction[], index: number) => boolean,
+    dismiss?: () => boolean,
+    // DrawerRouter action creators
+    openDrawer?: () => boolean,
+    closeDrawer?: () => boolean,
+    toggleDrawer?: () => boolean,
   };
 
   declare export type NavigationNavigatorProps<O: {}, S: {}> = $Shape<{
@@ -534,7 +545,10 @@ declare module 'react-navigation' {
     State: NavigationState,
     Options: {},
     Props: {}
-  > = React$ComponentType<NavigationContainerProps<State, Options> & Props> & {
+  > = React$ComponentType<{
+    ...Props,
+    ...NavigationContainerProps<State, Options>,
+  }> & {
     router: NavigationRouter<State, Options>,
     navigationOptions?: ?NavigationScreenConfig<Options>,
   };
@@ -766,7 +780,7 @@ declare module 'react-navigation' {
     view: NavigationView<O, S>,
     router: NavigationRouter<S, O>,
     navigatorConfig?: NavigatorConfig
-  ): any;
+  ): NavigationNavigator<S, O, *>;
 
   declare export function StackNavigator(
     routeConfigMap: NavigationRouteConfigMap,

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-navigation",
-  "version": "2.0.2",
+  "version": "2.0.3",
   "description": "Routing and navigation for your React Native apps",
   "main": "src/react-navigation.js",
   "repository": {
@@ -36,9 +36,9 @@
     "prop-types": "^15.5.10",
     "react-lifecycles-compat": "^3",
     "react-native-drawer-layout-polyfill": "^1.3.2",
-    "react-native-safe-area-view": "^0.7.0",
-    "react-navigation-deprecated-tab-navigator": "1.2.0",
-    "react-navigation-tabs": "0.2.0"
+    "react-native-safe-area-view": "^0.8.0",
+    "react-navigation-deprecated-tab-navigator": "1.3.0",
+    "react-navigation-tabs": "0.3.0"
   },
   "devDependencies": {
     "babel-cli": "^6.24.1",

src/__tests__/NavigationContainer-test.js

@@ -208,7 +208,7 @@ describe('NavigationContainer', () => {
       let spy = {};
 
       beforeEach(() => {
-        spy.console = jest.spyOn(console, 'error').mockImplementation(() => {});
+        spy.console = jest.spyOn(console, 'warn').mockImplementation(() => {});
       });
 
       afterEach(() => {

src/createNavigationContainer.js

@@ -285,6 +285,8 @@ export default function createNavigationContainer(Component) {
           'Uncaught exception while starting app from persisted navigation state! Trying to render again with a fresh navigation state..'
         );
         this.dispatch(NavigationActions.init());
+      } else {
+        throw new Error(e);
       }
     }
 

src/navigators/createDrawerNavigator.js

@@ -5,7 +5,6 @@ import SafeAreaView from 'react-native-safe-area-view';
 import createNavigator from './createNavigator';
 import createNavigationContainer from '../createNavigationContainer';
 import DrawerRouter from '../routers/DrawerRouter';
-import DrawerScreen from '../views/Drawer/DrawerScreen';
 import DrawerView from '../views/Drawer/DrawerView';
 import DrawerItems from '../views/Drawer/DrawerNavigatorItems';
 

src/react-navigation.js

@@ -79,6 +79,9 @@ module.exports = {
   get TabRouter() {
     return require('./routers/TabRouter').default;
   },
+  get DrawerRouter() {
+    return require('./routers/DrawerRouter').default;
+  },
   get SwitchRouter() {
     return require('./routers/SwitchRouter').default;
   },
@@ -121,6 +124,9 @@ module.exports = {
   get DrawerItems() {
     return require('./views/Drawer/DrawerNavigatorItems').default;
   },
+  get DrawerSidebar() {
+    return require('./views/Drawer/DrawerSidebar').default;
+  },
 
   // TabView
   get TabView() {

src/routers/DrawerRouter.js

@@ -25,11 +25,14 @@ export default (routeConfigs, config = {}) => {
       };
     },
 
-    getStateForAction(action, lastState) {
-      const state = lastState || {
-        ...switchRouter.getStateForAction(action, undefined),
-        isDrawerOpen: false,
-      };
+    getStateForAction(action, state) {
+      // Set up the initial state if needed
+      if (!state) {
+        return {
+          ...switchRouter.getStateForAction(action, undefined),
+          isDrawerOpen: false,
+        };
+      }
 
       const isRouterTargeted = action.key == null || action.key === state.key;
 

src/routers/__tests__/DrawerRouter-test.js

@@ -45,6 +45,43 @@ describe('DrawerRouter', () => {
     expect(router.getComponentForState(expectedState2)).toEqual(ScreenB);
   });
 
+  test('Handles initial route navigation', () => {
+    const FooScreen = () => <div />;
+    const BarScreen = () => <div />;
+    const router = DrawerRouter(
+      {
+        Foo: {
+          screen: FooScreen,
+        },
+        Bar: {
+          screen: BarScreen,
+        },
+      },
+      { initialRouteName: 'Bar' }
+    );
+    const state = router.getStateForAction({
+      type: NavigationActions.NAVIGATE,
+      routeName: 'Foo',
+    });
+    expect(state).toEqual({
+      index: 0,
+      isDrawerOpen: false,
+      isTransitioning: false,
+      routes: [
+        {
+          key: 'Foo',
+          params: undefined,
+          routeName: 'Foo',
+        },
+        {
+          key: 'Bar',
+          params: undefined,
+          routeName: 'Bar',
+        },
+      ],
+    });
+  });
+
   test('Drawer opens closes and toggles', () => {
     const ScreenA = () => <div />;
     const ScreenB = () => <div />;

src/views/Drawer/DrawerScreen.js

@@ -1,24 +0,0 @@
-import React from 'react';
-
-import SceneView from '../SceneView';
-
-/**
- * Component that renders the child screen of the drawer.
- */
-class DrawerScreen extends React.PureComponent {
-  render() {
-    const { descriptors, navigation, screenProps } = this.props;
-    const { routes, index } = navigation.state;
-    const descriptor = descriptors[routes[index].key];
-    const Content = descriptor.getComponent();
-    return (
-      <SceneView
-        screenProps={screenProps}
-        component={Content}
-        navigation={descriptor.navigation}
-      />
-    );
-  }
-}
-
-export default DrawerScreen;

src/views/Drawer/DrawerView.js

@@ -93,6 +93,7 @@ export default class DrawerView extends React.PureComponent {
           this._drawer = c;
         }}
         drawerLockMode={
+          drawerLockMode ||
           (this.props.screenProps && this.props.screenProps.drawerLockMode) ||
           this.props.navigationConfig.drawerLockMode
         }

src/views/StackView/StackViewLayout.js

@@ -518,15 +518,17 @@ class StackViewLayout extends React.Component {
     if (!hasHeader && headerMode === 'float') {
       const { isLandscape } = this.props;
       let headerHeight;
-      if (Platform.OS === 'android') {
-        // TODO: Need to handle translucent status bar.
-        headerHeight = 56;
-      } else if (isLandscape && !Platform.isPad) {
-        headerHeight = 52;
-      } else if (IS_IPHONE_X) {
-        headerHeight = 88;
+      if (Platform.OS === 'ios') {
+        if (isLandscape && !Platform.isPad) {
+          headerHeight = 52;
+        } else if (IS_IPHONE_X) {
+          headerHeight = 88;
+        } else {
+          headerHeight = 64;
+        }
       } else {
-        headerHeight = 64;
+        headerHeight = 56;
+        // TODO (Android only): Need to handle translucent status bar.
       }
       marginTop = -headerHeight;
     }