Add SwitchNavigator to 2.x

examples/NavigationPlayground/js/SwitchWithStacks.js

@@ -0,0 +1,121 @@
+/**
+ * @flow
+ */
+
+import React from 'react';
+import {
+  ActivityIndicator,
+  AsyncStorage,
+  Button,
+  StatusBar,
+  StyleSheet,
+  View,
+} from 'react-native';
+import { StackNavigator, SwitchNavigator } from 'react-navigation';
+
+class SignInScreen extends React.Component<any, any> {
+  static navigationOptions = {
+    title: 'Please sign in',
+  };
+
+  render() {
+    return (
+      <View style={styles.container}>
+        <Button title="Sign in!" onPress={this._signInAsync} />
+        <Button
+          title="Go back to other examples"
+          onPress={() => this.props.navigation.goBack(null)}
+        />
+        <StatusBar barStyle="default" />
+      </View>
+    );
+  }
+
+  _signInAsync = async () => {
+    await AsyncStorage.setItem('userToken', 'abc');
+    this.props.navigation.navigate('App');
+  };
+}
+
+class HomeScreen extends React.Component<any, any> {
+  static navigationOptions = {
+    title: 'Welcome to the app!',
+  };
+
+  render() {
+    return (
+      <View style={styles.container}>
+        <Button title="Show me more of the app" onPress={this._showMoreApp} />
+        <Button title="Actually, sign me out :)" onPress={this._signOutAsync} />
+        <StatusBar barStyle="default" />
+      </View>
+    );
+  }
+
+  _showMoreApp = () => {
+    this.props.navigation.navigate('Other');
+  };
+
+  _signOutAsync = async () => {
+    await AsyncStorage.clear();
+    this.props.navigation.navigate('Auth');
+  };
+}
+
+class OtherScreen extends React.Component<any, any> {
+  static navigationOptions = {
+    title: 'Lots of features here',
+  };
+
+  render() {
+    return (
+      <View style={styles.container}>
+        <Button title="I'm done, sign me out" onPress={this._signOutAsync} />
+        <StatusBar barStyle="default" />
+      </View>
+    );
+  }
+
+  _signOutAsync = async () => {
+    await AsyncStorage.clear();
+    this.props.navigation.navigate('Auth');
+  };
+}
+
+class LoadingScreen extends React.Component<any, any> {
+  componentDidMount() {
+    this._bootstrapAsync();
+  }
+
+  _bootstrapAsync = async () => {
+    const userToken = await AsyncStorage.getItem('userToken');
+    let initialRouteName = userToken ? 'App' : 'Auth';
+    this.props.navigation.navigate(initialRouteName);
+  };
+
+  render() {
+    return (
+      <View style={styles.container}>
+        <ActivityIndicator />
+        <StatusBar barStyle="default" />
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});
+
+const AppStack = StackNavigator({ Home: HomeScreen, Other: OtherScreen });
+const AuthStack = StackNavigator({ SignIn: SignInScreen });
+
+export default SwitchNavigator({
+  Loading: LoadingScreen,
+  App: AppStack,
+  Auth: AuthStack,
+});

flow/react-navigation.js

@@ -379,6 +379,20 @@ declare module 'react-navigation' {
     ...NavigationStackRouterConfig,
   |};
 
+  /**
+   * Switch Navigator
+   */
+
+  declare export type NavigationSwitchRouterConfig = {|
+    initialRouteName?: string,
+    initialRouteParams?: NavigationParams,
+    paths?: NavigationPathsConfig,
+    navigationOptions?: NavigationScreenConfig<*>,
+    order?: Array<string>,
+    backBehavior?: 'none' | 'initialRoute', // defaults to `'none'`
+    resetOnBlur?: boolean, // defaults to `true`
+  |};
+
   /**
    * Tab Navigator
    */
@@ -390,7 +404,6 @@ declare module 'react-navigation' {
     navigationOptions?: NavigationScreenConfig<*>,
     // todo: type these as the real route names rather than 'string'
     order?: Array<string>,
-
     // Does the back button cause the router to switch to the initial tab
     backBehavior?: 'none' | 'initialRoute', // defaults `initialRoute`
   |};
@@ -771,6 +784,13 @@ declare module 'react-navigation' {
     routeConfigs: NavigationRouteConfigMap,
     config?: _TabNavigatorConfig
   ): NavigationContainer<*, *, *>;
+  declare type _SwitchNavigatorConfig = {|
+    ...NavigationSwitchRouterConfig,
+  |};
+  declare export function SwitchNavigator(
+    routeConfigs: NavigationRouteConfigMap,
+    config?: _SwitchNavigatorConfig
+  ): NavigationContainer<*, *, *>;
 
   declare type _DrawerViewConfig = {|
     drawerLockMode?: 'unlocked' | 'locked-closed' | 'locked-open',

src/navigators/__tests__/DrawerNavigator-test.js

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import { View } from 'react-native';
 import renderer from 'react-test-renderer';
 
-import DrawerNavigator from '../DrawerNavigator';
+import DrawerNavigator from '../createDrawerNavigator';
 
 class HomeScreen extends Component {
   static navigationOptions = ({ navigation }) => ({

src/navigators/__tests__/SwitchNavigator-test.js

@@ -0,0 +1,18 @@
+import React, { Component } from 'react';
+import { View } from 'react-native';
+import renderer from 'react-test-renderer';
+
+import SwitchNavigator from '../createSwitchNavigator';
+
+const A = () => <View />;
+const B = () => <View />;
+const routeConfig = { A, B };
+
+describe('SwitchNavigator', () => {
+  it('renders successfully', () => {
+    const MySwitchNavigator = SwitchNavigator(routeConfig);
+    const rendered = renderer.create(<MySwitchNavigator />).toJSON();
+
+    expect(rendered).toMatchSnapshot();
+  });
+});

src/navigators/__tests__/__snapshots__/SwitchNavigator-test.js.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`SwitchNavigator renders successfully 1`] = `<View />`;

src/navigators/createSwitchNavigator.js

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

src/react-navigation.js

@@ -22,11 +22,14 @@ module.exports = {
   get StackNavigator() {
     return require('./navigators/createStackNavigator').default;
   },
+  get SwitchNavigator() {
+    return require('./navigators/createSwitchNavigator').default;
+  },
   get TabNavigator() {
     return require('./navigators/createTabNavigator').default;
   },
   get DrawerNavigator() {
-    return require('./navigators/DrawerNavigator').default;
+    return require('./navigators/createDrawerNavigator').default;
   },
 
   // Routers
@@ -36,6 +39,9 @@ module.exports = {
   get TabRouter() {
     return require('./routers/TabRouter').default;
   },
+  get SwitchRouter() {
+    return require('./routers/SwitchRouter').default;
+  },
 
   // Views
   get Transitioner() {
@@ -81,6 +87,11 @@ module.exports = {
     return require('./views/TabView/TabBarBottom').default;
   },
 
+  // SwitchView
+  get SwitchView() {
+    return require('./views/SwitchView/SwitchView').default;
+  },
+
   // HOCs
   get withNavigation() {
     return require('./views/withNavigation').default;

src/routers/DrawerRouter.js

@@ -1,16 +1,22 @@
-import invariant from '../utils/invariant';
-import TabRouter from './TabRouter';
-
+import SwitchRouter from './SwitchRouter';
 import NavigationActions from '../NavigationActions';
 
+import invariant from '../utils/invariant';
+import withDefaultValue from '../utils/withDefaultValue';
+
 export default (routeConfigs, config = {}) => {
-  const tabRouter = TabRouter(routeConfigs, config);
+  config = { ...config };
+  config = withDefaultValue(config, 'resetOnBlur', false);
+  config = withDefaultValue(config, 'backBehavior', 'initialRoute');
+
+  const switchRouter = SwitchRouter(routeConfigs, config);
+
   return {
-    ...tabRouter,
+    ...switchRouter,
 
     getStateForAction(action, lastState) {
       const state = lastState || {
-        ...tabRouter.getStateForAction(action, undefined),
+        ...switchRouter.getStateForAction(action, undefined),
         isDrawerOpen: false,
       };
 
@@ -41,11 +47,11 @@ export default (routeConfigs, config = {}) => {
       }
 
       // Fall back on tab router for screen switching logic
-      const tabState = tabRouter.getStateForAction(action, state);
-      if (tabState !== null && tabState !== state) {
+      const childState = switchRouter.getStateForAction(action, state);
+      if (childState !== null && childState !== state) {
         // If the tabs have changed, make sure to close the drawer
         return {
-          ...tabState,
+          ...childState,
           isDrawerOpen: false,
         };
       }

src/routers/SwitchRouter.js

@@ -0,0 +1,358 @@
+import invariant from '../utils/invariant';
+import getScreenForRouteName from './getScreenForRouteName';
+import createConfigGetter from './createConfigGetter';
+
+import NavigationActions from '../NavigationActions';
+import validateRouteConfigMap from './validateRouteConfigMap';
+
+function childrenUpdateWithoutSwitchingIndex(actionType) {
+  return [
+    NavigationActions.SET_PARAMS,
+    NavigationActions.COMPLETE_TRANSITION,
+  ].includes(actionType);
+}
+
+export default (routeConfigs, config = {}) => {
+  // Fail fast on invalid route definitions
+  validateRouteConfigMap(routeConfigs);
+
+  const order = config.order || Object.keys(routeConfigs);
+  const paths = config.paths || {};
+  const initialRouteParams = config.initialRouteParams;
+  const initialRouteName = config.initialRouteName || order[0];
+  const backBehavior = config.backBehavior || 'none';
+  const shouldBackNavigateToInitialRoute = backBehavior === 'initialRoute';
+  const resetOnBlur = config.hasOwnProperty('resetOnBlur')
+    ? config.resetOnBlur
+    : true;
+  const initialRouteIndex = order.indexOf(initialRouteName);
+  const childRouters = {};
+
+  order.forEach(routeName => {
+    const routeConfig = routeConfigs[routeName];
+    paths[routeName] =
+      typeof routeConfig.path === 'string' ? routeConfig.path : routeName;
+    childRouters[routeName] = null;
+    const screen = getScreenForRouteName(routeConfigs, routeName);
+    if (screen.router) {
+      childRouters[routeName] = screen.router;
+    }
+  });
+  if (initialRouteIndex === -1) {
+    throw new Error(
+      `Invalid initialRouteName '${initialRouteName}'.` +
+        `Should be one of ${order.map(n => `"${n}"`).join(', ')}`
+    );
+  }
+
+  function resetChildRoute(routeName) {
+    const params =
+      routeName === initialRouteName ? initialRouteParams : undefined;
+    const childRouter = childRouters[routeName];
+    if (childRouter) {
+      const childAction = NavigationActions.init();
+      return {
+        ...childRouter.getStateForAction(childAction),
+        key: routeName,
+        routeName,
+        params,
+      };
+    }
+    return {
+      key: routeName,
+      routeName,
+      params,
+    };
+  }
+
+  return {
+    getInitialState() {
+      const routes = order.map(resetChildRoute);
+      return {
+        routes,
+        index: initialRouteIndex,
+        isTransitioning: false,
+      };
+    },
+
+    getNextState(prevState, possibleNextState) {
+      if (!prevState) {
+        return possibleNextState;
+      }
+
+      let nextState;
+      if (prevState.index !== possibleNextState.index && resetOnBlur) {
+        const prevRouteName = prevState.routes[prevState.index].routeName;
+        const nextRoutes = [...possibleNextState.routes];
+        nextRoutes[prevState.index] = resetChildRoute(prevRouteName);
+
+        return {
+          ...possibleNextState,
+          routes: nextRoutes,
+        };
+      } else {
+        nextState = possibleNextState;
+      }
+
+      return nextState;
+    },
+
+    getStateForAction(action, inputState) {
+      let prevState = inputState ? { ...inputState } : inputState;
+      let state = inputState || this.getInitialState();
+      let activeChildIndex = state.index;
+
+      if (action.type === NavigationActions.INIT) {
+        // NOTE(brentvatne): this seems weird... why are we merging these
+        // params into child routes?
+        // ---------------------------------------------------------------
+        // Merge any params from the action into all the child routes
+        const { params } = action;
+        if (params) {
+          state.routes = state.routes.map(route => ({
+            ...route,
+            params: {
+              ...route.params,
+              ...params,
+              ...(route.routeName === initialRouteName
+                ? initialRouteParams
+                : null),
+            },
+          }));
+        }
+      }
+
+      // Let the current child handle it
+      const activeChildLastState = state.routes[state.index];
+      const activeChildRouter = childRouters[order[state.index]];
+      if (activeChildRouter) {
+        const activeChildState = activeChildRouter.getStateForAction(
+          action,
+          activeChildLastState
+        );
+        if (!activeChildState && inputState) {
+          return null;
+        }
+        if (activeChildState && activeChildState !== activeChildLastState) {
+          const routes = [...state.routes];
+          routes[state.index] = activeChildState;
+          return this.getNextState(prevState, {
+            ...state,
+            routes,
+          });
+        }
+      }
+
+      // Handle tab changing. Do this after letting the current tab try to
+      // handle the action, to allow inner children to change first
+      const isBackEligible =
+        action.key == null || action.key === activeChildLastState.key;
+      if (action.type === NavigationActions.BACK) {
+        if (isBackEligible && shouldBackNavigateToInitialRoute) {
+          activeChildIndex = initialRouteIndex;
+        } else {
+          return state;
+        }
+      }
+
+      let didNavigate = false;
+      if (action.type === NavigationActions.NAVIGATE) {
+        const navigateAction = action;
+        didNavigate = !!order.find((childId, i) => {
+          if (childId === navigateAction.routeName) {
+            activeChildIndex = i;
+            return true;
+          }
+          return false;
+        });
+        if (didNavigate) {
+          const childState = state.routes[activeChildIndex];
+          const childRouter = childRouters[action.routeName];
+          let newChildState;
+
+          if (action.action) {
+            newChildState = childRouter
+              ? childRouter.getStateForAction(action.action, childState)
+              : null;
+          } else if (!childRouter && action.params) {
+            newChildState = {
+              ...childState,
+              params: {
+                ...(childState.params || {}),
+                ...action.params,
+              },
+            };
+          }
+
+          if (newChildState && newChildState !== childState) {
+            const routes = [...state.routes];
+            routes[activeChildIndex] = newChildState;
+            return this.getNextState(prevState, {
+              ...state,
+              routes,
+              index: activeChildIndex,
+            });
+          }
+        }
+      }
+
+      if (action.type === NavigationActions.SET_PARAMS) {
+        const key = action.key;
+        const lastRoute = state.routes.find(route => route.key === key);
+        if (lastRoute) {
+          const params = {
+            ...lastRoute.params,
+            ...action.params,
+          };
+          const routes = [...state.routes];
+          routes[state.routes.indexOf(lastRoute)] = {
+            ...lastRoute,
+            params,
+          };
+          return this.getNextState(prevState, {
+            ...state,
+            routes,
+          });
+        }
+      }
+
+      if (activeChildIndex !== state.index) {
+        return this.getNextState(prevState, {
+          ...state,
+          index: activeChildIndex,
+        });
+      } else if (didNavigate && !inputState) {
+        return state;
+      } else if (didNavigate) {
+        return { ...state };
+      }
+
+      // Let other children handle it and switch to the first child that returns a new state
+      let index = state.index;
+      let routes = state.routes;
+      order.find((childId, i) => {
+        const childRouter = childRouters[childId];
+        if (i === index) {
+          return false;
+        }
+        let childState = routes[i];
+        if (childRouter) {
+          childState = childRouter.getStateForAction(action, childState);
+        }
+        if (!childState) {
+          index = i;
+          return true;
+        }
+        if (childState !== routes[i]) {
+          routes = [...routes];
+          routes[i] = childState;
+          index = i;
+          return true;
+        }
+        return false;
+      });
+
+      // Nested routers can be updated after switching children with actions such as SET_PARAMS
+      // and COMPLETE_TRANSITION.
+      // NOTE: This may be problematic with custom routers because we whitelist the actions
+      // that can be handled by child routers without automatically changing index.
+      if (childrenUpdateWithoutSwitchingIndex(action.type)) {
+        index = state.index;
+      }
+
+      if (index !== state.index || routes !== state.routes) {
+        return this.getNextState(prevState, {
+          ...state,
+          index,
+          routes,
+        });
+      }
+      return state;
+    },
+
+    getComponentForState(state) {
+      const routeName = state.routes[state.index].routeName;
+      invariant(
+        routeName,
+        `There is no route defined for index ${state.index}. Check that
+        that you passed in a navigation state with a valid tab/screen index.`
+      );
+      const childRouter = childRouters[routeName];
+      if (childRouter) {
+        return childRouter.getComponentForState(state.routes[state.index]);
+      }
+      return getScreenForRouteName(routeConfigs, routeName);
+    },
+
+    getComponentForRouteName(routeName) {
+      return getScreenForRouteName(routeConfigs, routeName);
+    },
+
+    getPathAndParamsForState(state) {
+      const route = state.routes[state.index];
+      const routeName = order[state.index];
+      const subPath = paths[routeName];
+      const screen = getScreenForRouteName(routeConfigs, routeName);
+      let path = subPath;
+      let params = route.params;
+      if (screen && screen.router) {
+        const stateRoute = route;
+        // If it has a router it's a navigator.
+        // If it doesn't have router it's an ordinary React component.
+        const child = screen.router.getPathAndParamsForState(stateRoute);
+        path = subPath ? `${subPath}/${child.path}` : child.path;
+        params = child.params ? { ...params, ...child.params } : params;
+      }
+      return {
+        path,
+        params,
+      };
+    },
+
+    /**
+     * Gets an optional action, based on a relative path and query params.
+     *
+     * This will return null if there is no action matched
+     */
+    getActionForPathAndParams(path, params) {
+      return (
+        order
+          .map(childId => {
+            const parts = path.split('/');
+            const pathToTest = paths[childId];
+            if (parts[0] === pathToTest) {
+              const childRouter = childRouters[childId];
+              const action = NavigationActions.navigate({
+                routeName: childId,
+              });
+              if (childRouter && childRouter.getActionForPathAndParams) {
+                action.action = childRouter.getActionForPathAndParams(
+                  parts.slice(1).join('/'),
+                  params
+                );
+              } else if (params) {
+                action.params = params;
+              }
+              return action;
+            }
+            return null;
+          })
+          .find(action => !!action) ||
+        order
+          .map(childId => {
+            const childRouter = childRouters[childId];
+            return (
+              childRouter && childRouter.getActionForPathAndParams(path, params)
+            );
+          })
+          .find(action => !!action) ||
+        null
+      );
+    },
+
+    getScreenOptions: createConfigGetter(
+      routeConfigs,
+      config.navigationOptions
+    ),
+  };
+};

src/routers/TabRouter.js

@@ -1,326 +1,11 @@
-import invariant from '../utils/invariant';
-import getScreenForRouteName from './getScreenForRouteName';
-import createConfigGetter from './createConfigGetter';
-
-import NavigationActions from '../NavigationActions';
-import validateRouteConfigMap from './validateRouteConfigMap';
-
-function childrenUpdateWithoutSwitchingIndex(actionType) {
-  return [
-    NavigationActions.SET_PARAMS,
-    NavigationActions.COMPLETE_TRANSITION,
-  ].includes(actionType);
-}
+import SwitchRouter from './SwitchRouter';
+import withDefaultValue from '../utils/withDefaultValue';
 
 export default (routeConfigs, config = {}) => {
-  // Fail fast on invalid route definitions
-  validateRouteConfigMap(routeConfigs);
+  config = { ...config };
+  config = withDefaultValue(config, 'resetOnBlur', false);
+  config = withDefaultValue(config, 'backBehavior', 'initialRoute');
 
-  const order = config.order || Object.keys(routeConfigs);
-  const paths = config.paths || {};
-  const initialRouteParams = config.initialRouteParams;
-  const initialRouteName = config.initialRouteName || order[0];
-  const initialRouteIndex = order.indexOf(initialRouteName);
-  const backBehavior = config.backBehavior || 'initialRoute';
-  const shouldBackNavigateToInitialRoute = backBehavior === 'initialRoute';
-  const tabRouters = {};
-  order.forEach(routeName => {
-    const routeConfig = routeConfigs[routeName];
-    paths[routeName] =
-      typeof routeConfig.path === 'string' ? routeConfig.path : routeName;
-    tabRouters[routeName] = null;
-    const screen = getScreenForRouteName(routeConfigs, routeName);
-    if (screen.router) {
-      tabRouters[routeName] = screen.router;
-    }
-  });
-  if (initialRouteIndex === -1) {
-    throw new Error(
-      `Invalid initialRouteName '${initialRouteName}' for TabRouter. ` +
-        `Should be one of ${order.map(n => `"${n}"`).join(', ')}`
-    );
-  }
-  return {
-    getStateForAction(action, inputState) {
-      // Establish a default state
-      let state = inputState;
-      if (!state) {
-        const routes = order.map(routeName => {
-          const params =
-            routeName === initialRouteName ? initialRouteParams : undefined;
-          const tabRouter = tabRouters[routeName];
-          if (tabRouter) {
-            const childAction = NavigationActions.init();
-            return {
-              ...tabRouter.getStateForAction(childAction),
-              key: routeName,
-              routeName,
-              params,
-            };
-          }
-          return {
-            key: routeName,
-            routeName,
-            params,
-          };
-        });
-        state = {
-          routes,
-          index: initialRouteIndex,
-          isTransitioning: false,
-        };
-        // console.log(`${order.join('-')}: Initial state`, {state});
-      }
-
-      if (action.type === NavigationActions.INIT) {
-        // Merge any params from the action into all the child routes
-        const { params } = action;
-        if (params) {
-          state.routes = state.routes.map(route => ({
-            ...route,
-            params: {
-              ...route.params,
-              ...params,
-              ...(route.routeName === initialRouteName
-                ? initialRouteParams
-                : null),
-            },
-          }));
-        }
-      }
-
-      // Let the current tab handle it
-      const activeTabLastState = state.routes[state.index];
-      const activeTabRouter = tabRouters[order[state.index]];
-      if (activeTabRouter) {
-        const activeTabState = activeTabRouter.getStateForAction(
-          action,
-          activeTabLastState
-        );
-        if (!activeTabState && inputState) {
-          return null;
-        }
-        if (activeTabState && activeTabState !== activeTabLastState) {
-          const routes = [...state.routes];
-          routes[state.index] = activeTabState;
-          return {
-            ...state,
-            routes,
-          };
-        }
-      }
-
-      // Handle tab changing. Do this after letting the current tab try to
-      // handle the action, to allow inner tabs to change first
-      let activeTabIndex = state.index;
-      const isBackEligible =
-        action.key == null || action.key === activeTabLastState.key;
-      if (action.type === NavigationActions.BACK) {
-        if (isBackEligible && shouldBackNavigateToInitialRoute) {
-          activeTabIndex = initialRouteIndex;
-        } else {
-          return state;
-        }
-      }
-      let didNavigate = false;
-      if (action.type === NavigationActions.NAVIGATE) {
-        const navigateAction = action;
-        didNavigate = !!order.find((tabId, i) => {
-          if (tabId === navigateAction.routeName) {
-            activeTabIndex = i;
-            return true;
-          }
-          return false;
-        });
-        if (didNavigate) {
-          const childState = state.routes[activeTabIndex];
-          let newChildState;
-
-          const tabRouter = tabRouters[action.routeName];
-
-          if (action.action) {
-            newChildState = tabRouter
-              ? tabRouter.getStateForAction(action.action, childState)
-              : null;
-          } else if (!tabRouter && action.params) {
-            newChildState = {
-              ...childState,
-              params: {
-                ...(childState.params || {}),
-                ...action.params,
-              },
-            };
-          }
-
-          if (newChildState && newChildState !== childState) {
-            const routes = [...state.routes];
-            routes[activeTabIndex] = newChildState;
-            return {
-              ...state,
-              routes,
-              index: activeTabIndex,
-            };
-          }
-        }
-      }
-      if (action.type === NavigationActions.SET_PARAMS) {
-        const key = action.key;
-        const lastRoute = state.routes.find(route => route.key === key);
-        if (lastRoute) {
-          const params = {
-            ...lastRoute.params,
-            ...action.params,
-          };
-          const routes = [...state.routes];
-          routes[state.routes.indexOf(lastRoute)] = {
-            ...lastRoute,
-            params,
-          };
-          return {
-            ...state,
-            routes,
-          };
-        }
-      }
-      if (activeTabIndex !== state.index) {
-        return {
-          ...state,
-          index: activeTabIndex,
-        };
-      } else if (didNavigate && !inputState) {
-        return state;
-      } else if (didNavigate) {
-        return null;
-      }
-
-      // Let other tabs handle it and switch to the first tab that returns a new state
-      let index = state.index;
-      let routes = state.routes;
-      order.find((tabId, i) => {
-        const tabRouter = tabRouters[tabId];
-        if (i === index) {
-          return false;
-        }
-        let tabState = routes[i];
-        if (tabRouter) {
-          // console.log(`${order.join('-')}: Processing child router:`, {action, tabState});
-          tabState = tabRouter.getStateForAction(action, tabState);
-        }
-        if (!tabState) {
-          index = i;
-          return true;
-        }
-        if (tabState !== routes[i]) {
-          routes = [...routes];
-          routes[i] = tabState;
-          index = i;
-          return true;
-        }
-        return false;
-      });
-      // console.log(`${order.join('-')}: Processed other tabs:`, {lastIndex: state.index, index});
-
-      // Nested routers can be updated after switching tabs with actions such as SET_PARAMS
-      // and COMPLETE_TRANSITION.
-      // NOTE: This may be problematic with custom routers because we whitelist the actions
-      // that can be handled by child routers without automatically changing index.
-      if (childrenUpdateWithoutSwitchingIndex(action.type)) {
-        index = state.index;
-      }
-
-      if (index !== state.index || routes !== state.routes) {
-        return {
-          ...state,
-          index,
-          routes,
-        };
-      }
-      return state;
-    },
-
-    getComponentForState(state) {
-      const routeName = state.routes[state.index].routeName;
-      invariant(
-        routeName,
-        `There is no route defined for index ${state.index}. Check that
-        that you passed in a navigation state with a valid tab/screen index.`
-      );
-      const childRouter = tabRouters[routeName];
-      if (childRouter) {
-        return childRouter.getComponentForState(state.routes[state.index]);
-      }
-      return getScreenForRouteName(routeConfigs, routeName);
-    },
-
-    getComponentForRouteName(routeName) {
-      return getScreenForRouteName(routeConfigs, routeName);
-    },
-
-    getPathAndParamsForState(state) {
-      const route = state.routes[state.index];
-      const routeName = order[state.index];
-      const subPath = paths[routeName];
-      const screen = getScreenForRouteName(routeConfigs, routeName);
-      let path = subPath;
-      let params = route.params;
-      if (screen && screen.router) {
-        const stateRoute = route;
-        // If it has a router it's a navigator.
-        // If it doesn't have router it's an ordinary React component.
-        const child = screen.router.getPathAndParamsForState(stateRoute);
-        path = subPath ? `${subPath}/${child.path}` : child.path;
-        params = child.params ? { ...params, ...child.params } : params;
-      }
-      return {
-        path,
-        params,
-      };
-    },
-
-    /**
-     * Gets an optional action, based on a relative path and query params.
-     *
-     * This will return null if there is no action matched
-     */
-    getActionForPathAndParams(path, params) {
-      return (
-        order
-          .map(tabId => {
-            const parts = path.split('/');
-            const pathToTest = paths[tabId];
-            if (parts[0] === pathToTest) {
-              const tabRouter = tabRouters[tabId];
-              const action = NavigationActions.navigate({
-                routeName: tabId,
-              });
-              if (tabRouter && tabRouter.getActionForPathAndParams) {
-                action.action = tabRouter.getActionForPathAndParams(
-                  parts.slice(1).join('/'),
-                  params
-                );
-              } else if (params) {
-                action.params = params;
-              }
-              return action;
-            }
-            return null;
-          })
-          .find(action => !!action) ||
-        order
-          .map(tabId => {
-            const tabRouter = tabRouters[tabId];
-            return (
-              tabRouter && tabRouter.getActionForPathAndParams(path, params)
-            );
-          })
-          .find(action => !!action) ||
-        null
-      );
-    },
-
-    getScreenOptions: createConfigGetter(
-      routeConfigs,
-      config.navigationOptions
-    ),
-  };
+  const switchRouter = SwitchRouter(routeConfigs, config);
+  return switchRouter;
 };

src/routers/__tests__/SwitchRouter-test.js

@@ -0,0 +1,109 @@
+/* eslint react/display-name:0 */
+
+import React from 'react';
+import SwitchRouter from '../SwitchRouter';
+import StackRouter from '../StackRouter';
+import NavigationActions from '../../NavigationActions';
+
+describe('SwitchRouter', () => {
+  test('resets the route when unfocusing a tab by default', () => {
+    const router = getExampleRouter();
+    const state = router.getStateForAction({ type: NavigationActions.INIT });
+    const state2 = router.getStateForAction(
+      { type: NavigationActions.NAVIGATE, routeName: 'A2' },
+      state
+    );
+    expect(state2.routes[0].index).toEqual(1);
+    expect(state2.routes[0].routes.length).toEqual(2);
+
+    const state3 = router.getStateForAction(
+      { type: NavigationActions.NAVIGATE, routeName: 'B' },
+      state2
+    );
+
+    expect(state3.routes[0].index).toEqual(0);
+    expect(state3.routes[0].routes.length).toEqual(1);
+  });
+
+  test('does not reset the route on unfocus if resetOnBlur is false', () => {
+    const router = getExampleRouter({ resetOnBlur: false });
+    const state = router.getStateForAction({ type: NavigationActions.INIT });
+    const state2 = router.getStateForAction(
+      { type: NavigationActions.NAVIGATE, routeName: 'A2' },
+      state
+    );
+    expect(state2.routes[0].index).toEqual(1);
+    expect(state2.routes[0].routes.length).toEqual(2);
+
+    const state3 = router.getStateForAction(
+      { type: NavigationActions.NAVIGATE, routeName: 'B' },
+      state2
+    );
+
+    expect(state3.routes[0].index).toEqual(1);
+    expect(state3.routes[0].routes.length).toEqual(2);
+  });
+
+  test('ignores back by default', () => {
+    const router = getExampleRouter();
+    const state = router.getStateForAction({ type: NavigationActions.INIT });
+    const state2 = router.getStateForAction(
+      { type: NavigationActions.NAVIGATE, routeName: 'B' },
+      state
+    );
+    expect(state2.index).toEqual(1);
+
+    const state3 = router.getStateForAction(
+      { type: NavigationActions.BACK },
+      state2
+    );
+
+    expect(state3.index).toEqual(1);
+  });
+
+  test('handles back if given a backBehavior', () => {
+    const router = getExampleRouter({ backBehavior: 'initialRoute' });
+    const state = router.getStateForAction({ type: NavigationActions.INIT });
+    const state2 = router.getStateForAction(
+      { type: NavigationActions.NAVIGATE, routeName: 'B' },
+      state
+    );
+    expect(state2.index).toEqual(1);
+
+    const state3 = router.getStateForAction(
+      { type: NavigationActions.BACK },
+      state2
+    );
+
+    expect(state3.index).toEqual(0);
+  });
+});
+
+const getExampleRouter = (config = {}) => {
+  const PlainScreen = () => <div />;
+  const StackA = () => <div />;
+  const StackB = () => <div />;
+
+  StackA.router = StackRouter({
+    A1: PlainScreen,
+    A2: PlainScreen,
+  });
+
+  StackB.router = StackRouter({
+    B1: PlainScreen,
+    B2: PlainScreen,
+  });
+
+  const router = SwitchRouter(
+    {
+      A: StackA,
+      B: StackB,
+    },
+    {
+      initialRouteName: 'A',
+      ...config,
+    }
+  );
+
+  return router;
+};

src/utils/withDefaultValue.js

@@ -0,0 +1,8 @@
+export default (obj, key, defaultValue) => {
+  if (obj.hasOwnProperty(key)) {
+    return obj;
+  }
+
+  obj[key] = defaultValue;
+  return obj;
+};

src/views/SwitchView/SwitchView.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import SceneView from '../SceneView';
+
+export default class SwitchView extends React.Component {
+  render() {
+    const { state } = this.props.navigation;
+    const activeKey = state.routes[state.index].key;
+    const descriptor = this.props.descriptors[activeKey];
+    const ChildComponent = descriptor.getComponent();
+
+    return (
+      <SceneView
+        component={ChildComponent}
+        navigation={descriptor.navigation}
+        screenProps={this.props.screenProps}
+      />
+    );
+  }
+}