How to use navigation - 10 common examples

export function mockNavigator(parentKey?: string = 'foo') {
  // The constructor is checked in prop-types,
  // so we use it as base and then mutate

  const navigator = new StateNavigator(
    [
      { key: 'foo', route: 'foo' },
      { key: 'bar', route: 'bar' },
      { key: 'barChild', route: 'bar/child', parentKey: 'bar' },
    ],
    new HTML5HistoryManager(),
  );

  navigator.navigate(parentKey);

  return navigator;
}

var React = require('react');
var ReactDOM = require('react-dom');
var Navigation = require('navigation');
var Component = require('./Component');

Navigation.settings.historyManager = new Navigation.HTML5HistoryManager();

exports.register = function (props) {
	// Configures the Navigation router with the two routes.
	// This configuration is also used server side to power the JSON Api.
	Navigation.StateInfoConfig.build([
		{ key: 'masterDetails', initial: 'people', states: [
			{ key: 'people', route: '{pageNumber}', component: Component.Listing, defaults: { pageNumber: 1 }, trackCrumbTrail: false, transitions: [
				{ key: 'select', to: 'person' }]},
			{ key: 'person', route: 'person/{id}', component: Component.Details, defaults: { id: 0 } }]
		}
	]);
	// Client renders so React can catch up with the server rendered content.
	// Browsers that don't support HTML5 History won't get this progressive enhancement.
	if (props && window.history && window.history.pushState && window.XMLHttpRequest) {
		Navigation.start();
		render(props);

function registerNavigators() {
	// Adds navigating and navigated functions to the people and person States.
	// The navigating function issues an Ajax call for requested Url to get the JSON data.
	// The navigated function uses the JSON data to create props to render the State's Component.
	var states = Navigation.StateInfoConfig.dialogs.masterDetails.states;
	for(var key in states) {
		var state = states[key];
		state.navigating = function(data, url, navigate) {
			var req = new XMLHttpRequest();
			req.onreadystatechange = function() {
				if (req.readyState === 4) {
					navigate(JSON.parse(req.responseText));
				}
			};
			req.open('get', url);
			req.setRequestHeader('Content-Type', 'application/json');
			req.send(null);
		}
		state.navigated = function(data, asyncData) {
			var props = {};
			props[Navigation.StateContext.state.key] = asyncData;

exports.register = function (props) {
	// Configures the Navigation router with the two routes.
	// This configuration is also used server side to power the JSON Api.
	Navigation.StateInfoConfig.build([
		{ key: 'masterDetails', initial: 'people', states: [
			{ key: 'people', route: '{pageNumber}', component: Component.Listing, defaults: { pageNumber: 1 }, trackCrumbTrail: false, transitions: [
				{ key: 'select', to: 'person' }]},
			{ key: 'person', route: 'person/{id}', component: Component.Details, defaults: { id: 0 } }]
		}
	]);
	// Client renders so React can catch up with the server rendered content.
	// Browsers that don't support HTML5 History won't get this progressive enhancement.
	if (props && window.history && window.history.pushState && window.XMLHttpRequest) {
		Navigation.start();
		render(props);
		registerNavigators();
	}
}

login = () => {
    // Do app set up stuff here and navigate to logged in screen.
    NavigationHelpers.setRoot({ name: publicRoute.example })
  }

logout = () => {
    // Do app clean up stuff here and navigate to logged out screen.
    NavigationHelpers.setRoot({ name: publicRoute.example })
  }

exports.register = function (props) {
	// Configures the Navigation router with the two routes.
	// This configuration is also used server side to power the JSON Api.
	Navigation.StateInfoConfig.build([
		{ key: 'masterDetails', initial: 'people', states: [
			{ key: 'people', route: '{pageNumber}', component: Component.Listing, defaults: { pageNumber: 1 }, trackCrumbTrail: false, transitions: [
				{ key: 'select', to: 'person' }]},
			{ key: 'person', route: 'person/{id}', component: Component.Details, defaults: { id: 0 } }]
		}
	]);
	// Client renders so React can catch up with the server rendered content.
	// Browsers that don't support HTML5 History won't get this progressive enhancement.
	if (props && window.history && window.history.pushState && window.XMLHttpRequest) {
		Navigation.start();
		render(props);
		registerNavigators();
	}
}

return {
                            display_name: sm.display_name,
                            instruments: sm.instruments.filter(function(ins) {
                                return active_symbols.indexOf(ins.symbol) !== -1;
                            })
                        }
                    }).filter(function(sm) {
                        return sm.instruments.length !== 0;
                    })
                }
            }).filter(function(m) {
                return m.submarkets.length !== 0;
            });

            //console.warn(markets, chartable_markets);
            markets = menu.sortMenu(markets);

            const instruments = $("#nav-menu").find(".instruments");
            instruments.find('> ul').remove();
            menu.refreshMenu(instruments , markets, onMenuItemClick);
        });
}

prevActiveScreen: ?string,
  prevActiveScreenParams: Object,
}

export type NavigationReducerAction = {
  type: string,
  payload: any,
  action: {
    routeName: string,
    params: Object,
  },
  key: ?string,
}

const initialState = {
  ...RootNavigation.router.getStateForAction(
    RootNavigation.router.getActionForPathAndParams(ONBOARDING_FLOW),
  ),
  activeScreen: null,
  prevActiveScreen: null,
  prevActiveScreenParams: {},
};

const NAVIGATION_ACTION = 'Navigation';

function navigationReducer(state: NavigationReducerState = initialState, action: NavigationReducerAction) {
  if (action.type === SET_INITIAL_ROUTE) {
    return { ...state, activeScreen: action.payload };
  }
  if (action.type && action.type.includes(NAVIGATION_ACTION)) {
    const nextState = RootNavigation.router.getStateForAction(action, state) || state;
    const newActiveScreen = RootNavigation.router.getPathAndParamsForState(nextState).path.split('/').slice(-1)[0];

prevActiveScreenParams: Object,
}

export type NavigationReducerAction = {
  type: string,
  payload: any,
  action: {
    routeName: string,
    params: Object,
  },
  key: ?string,
}

const initialState = {
  ...RootNavigation.router.getStateForAction(
    RootNavigation.router.getActionForPathAndParams(ONBOARDING_FLOW),
  ),
  activeScreen: null,
  prevActiveScreen: null,
  prevActiveScreenParams: {},
};

const NAVIGATION_ACTION = 'Navigation';

function navigationReducer(state: NavigationReducerState = initialState, action: NavigationReducerAction) {
  if (action.type === SET_INITIAL_ROUTE) {
    return { ...state, activeScreen: action.payload };
  }
  if (action.type && action.type.includes(NAVIGATION_ACTION)) {
    const nextState = RootNavigation.router.getStateForAction(action, state) || state;
    const newActiveScreen = RootNavigation.router.getPathAndParamsForState(nextState).path.split('/').slice(-1)[0];
    const prevActiveScreenParams = RootNavigation.router.getPathAndParamsForState(state).params;