How to use navigation-react-mobile - 7 common examples

export default () => {
  const stateNavigator = new StateNavigator([
    {key: 'home', route: ''},
    {key: 'tweet', trackCrumbTrail: true},
    {key: 'timeline', trackCrumbTrail: true},
    {key: 'photo', trackCrumbTrail: true}
  ], new MobileHistoryManager(url => {
    var {state, data} = stateNavigator.parseLink(url);
    var fluent = stateNavigator.fluent().navigate('home');
    if (state.key === 'photo')
      fluent = fluent.navigate('tweet', {id: data.id})
    return fluent.navigate(state.key, data).url;
  }));

  const {home, tweet, timeline, photo} = stateNavigator.states;
  home.renderScene = () => ;
  tweet.renderScene = ({id}) => ;
  timeline.renderScene = ({id}) => ;
  photo.renderScene = ({id}) => ;
  
  return stateNavigator;
}

function getStateNavigator() {
    var buildStartUrl = url => {
        var { state, data } = stateNavigator.parseLink(url);
        var fluent = stateNavigator.fluent().navigate('people');
        stateNavigator.historyManager.addHistory(fluent.url, true);
        return fluent.navigate(state.key, data).url;
    };

    var stateNavigator = new StateNavigator([
        {key: 'people', route: '{pageNumber?}', defaults: {pageNumber: 1}},
        {key: 'person', route: 'person/{id}', defaults: {id: 0}, trackCrumbTrail: true}
    ], new MobileHistoryManager(buildStartUrl, ''));

    var { people, person } = stateNavigator.states;
    people.renderScene = ({pageNumber}) => ;
    person.renderScene = ({id}) => ;
    return stateNavigator;
}

export default () => {
  const states = [
    {key: 'sceneNorth', route: '', trackCrumbTrail: true},
    {key: 'sceneEast', trackCrumbTrail: true},
    {key: 'sceneSouth', trackCrumbTrail: true},
    {key: 'sceneWest', trackCrumbTrail: true},
  ];
  const stateNavigator = new StateNavigator(states, new MobileHistoryManager(url => {
    var {state} = stateNavigator.parseLink(url);
    var fluentNavigator = stateNavigator.fluent();
    for(var i = 0; i < states.length && states[i].key !== state.key; i++)
      fluentNavigator = fluentNavigator.navigate(states[i].key);
    return fluentNavigator.navigate(state.key).url;
  }));

  const { sceneNorth, sceneEast, sceneSouth, sceneWest } = stateNavigator.states;
  sceneNorth.renderScene = () => renderScene('North', 'blue', stateNavigator);
  sceneEast.renderScene = () => renderScene('East', 'red', stateNavigator);
  sceneSouth.renderScene = () => renderScene('South', 'green', stateNavigator);
  sceneWest.renderScene = () => renderScene('West', 'black', stateNavigator);

  const renderScene = (direction, color, stateNavigator) => (

{key: 'sceneEast', trackCrumbTrail: true},
    {key: 'sceneSouth', trackCrumbTrail: true},
    {key: 'sceneWest', trackCrumbTrail: true},
  ];

  const buildStartUrl = url => {
    var {state} = stateNavigator.parseLink(url);
    var fluent = stateNavigator.fluent();
    for(var i = 0; i < states.length && states[i].key !== state.key; i++) {
      fluent = fluent.navigate(states[i].key);
      stateNavigator.historyManager.addHistory(fluent.url, i === 0);
    }
    return fluent.navigate(state.key).url;
  };

  const stateNavigator = new StateNavigator(states, new MobileHistoryManager(buildStartUrl));

  const { sceneNorth, sceneEast, sceneSouth, sceneWest } = stateNavigator.states;
  sceneNorth.renderScene = () => renderScene('North', 'blue');
  sceneEast.renderScene = () => renderScene('East', 'red');
  sceneSouth.renderScene = () => renderScene('South', 'green');
  sceneWest.renderScene = () => renderScene('West', 'black');

  const renderScene = (direction, color) => (
    
  )

  sceneNorth.unmountedStyle = {translateY: -100};
  sceneEast.unmountedStyle = {translateX: 100};
  sceneSouth.unmountedStyle = {translateY: 100};
  sceneWest.unmountedStyle = {translateX: -100};

export default () => {
  const stateNavigator = new StateNavigator([
    {key: 'grid', route: ''},
    {key: 'detail', trackCrumbTrail: true},
  ], new MobileHistoryManager(url => {
    var {state, data} = stateNavigator.parseLink(url);
    return stateNavigator.fluent()
        .navigate('grid')
        .navigate(state.key, data).url;
  }));

  const {grid, detail} = stateNavigator.states;
  grid.renderScene = data => ;
  detail.renderScene = data => ;
  
  return stateNavigator;
}

export default () => {
  const buildStartUrl = url => {
    const {state, data} = stateNavigator.parseLink(url);
    let fluent = stateNavigator.fluent().navigate('grid');
    stateNavigator.historyManager.addHistory(fluent.url, true);
    return fluent.navigate(state.key, data).url;
  };

  const stateNavigator = new StateNavigator([
    {key: 'grid', route: ''},
    {key: 'detail', trackCrumbTrail: true},
  ], new MobileHistoryManager(buildStartUrl));

  const {grid, detail} = stateNavigator.states;
  grid.renderScene = data => ;
  detail.renderScene = data => ;
  
  return stateNavigator;
}

import {render} from 'react-dom';
import {NavigationHandler} from 'navigation-react';
import {MobileHistoryManager} from 'navigation-react-mobile';
import createStateNavigator from './createStateNavigator';
import Zoom from './Zoom';

const stateNavigator = createStateNavigator();

const buildStartUrl = url => {
  const {state, data} = stateNavigator.parseLink(url);
  let fluent = stateNavigator.fluent().navigate('grid');
  stateNavigator.historyManager.addHistory(fluent.url, true);
  return fluent.navigate(state.key, data).url;
};

stateNavigator.configure(stateNavigator, new MobileHistoryManager(buildStartUrl));

stateNavigator.start();

render(
  
    
  ,
  document.getElementById('content')
)