Version: 4.x

Routers

Routers define a component's navigation state, and they allow the developer to define paths and actions that can be handled.

Built-In Routers

react-navigation ships with a few standard routers:

Using Routers

To make a navigator manually, put a static router on a component.

class MyNavigator extends React.Component {
  static router = StackRouter(routes, config);
  ...
}

Now you can use this component as a screen in another navigator, and the navigation logic for MyNavigator will be defined by this StackRouter.

Customizing Routers

See the Custom Router API spec to learn about the API of StackRouter and TabRouter. You can override the router functions as you see fit:

Custom Navigation Actions

To override navigation behavior, you can override the navigation state logic in getStateForAction, and manually manipulate the routes and index.

const MyApp = createStackNavigator(
  {
    Home: { screen: HomeScreen },
    Profile: { screen: ProfileScreen },
  },
  {
    initialRouteName: 'Home',
  }
);

const defaultGetStateForAction = MyApp.router.getStateForAction;

MyApp.router.getStateForAction = (action, state) => {
  if (state && action.type === 'PushTwoProfiles') {
    const routes = [
      ...state.routes,
      { key: 'A', routeName: 'Profile', params: { name: action.name1 } },
      { key: 'B', routeName: 'Profile', params: { name: action.name2 } },
    ];
    return {
      ...state,
      routes,
      index: routes.length - 1,
    };
  }
  return defaultGetStateForAction(action, state);
};

Blocking Navigation Actions

Sometimes you may want to prevent some navigation activity, depending on your route.

import { NavigationActions } from 'react-navigation';

const MyStackRouter = StackRouter(
  {
    Home: { screen: HomeScreen },
    Profile: { screen: ProfileScreen },
  },
  {
    initialRouteName: 'Home',
  }
);

const defaultGetStateForAction = MyStackRouter.router.getStateForAction;

MyStackRouter.router.getStateForAction = (action, state) => {
  if (
    state &&
    action.type === NavigationActions.BACK &&
    state.routes[state.index].params.isEditing
  ) {
    // Returning null from getStateForAction means that the action
    // has been handled/blocked, but there is not a new state
    return null;
  }

  return defaultGetStateForAction(action, state);
};

Handling Custom URIs

Perhaps your app has a unique URI which the built-in routers cannot handle. You can always extend the router getActionForPathAndParams.

import { NavigationActions } from 'react-navigation';

const MyApp = createStackNavigator(
  {
    Home: { screen: HomeScreen },
    Profile: { screen: ProfileScreen },
  },
  {
    initialRouteName: 'Home',
  }
);
const previousGetActionForPathAndParams =
  MyApp.router.getActionForPathAndParams;

Object.assign(MyApp.router, {
  getActionForPathAndParams(path, params) {
    if (path === 'my/custom/path' && params.magic === 'yes') {
      // returns a profile navigate action for /my/custom/path?magic=yes
      return NavigationActions.navigate({
        routeName: 'Profile',
        action: NavigationActions.navigate({
          // This child action will get passed to the child router
          // ProfileScreen.router.getStateForAction to get the child
          // navigation state.
          routeName: 'Friends',
        }),
      });
    }
    return previousGetActionForPathAndParams(path, params);
  },
});

Built-In Routers#

Using Routers#

Customizing Routers#

Custom Navigation Actions#

Blocking Navigation Actions#