Navigation in React Native

What is Navigation?

Why Navigation?

Navigation in mobile apps covers these concerns

• Situational awareness: know where you're at, and possibly, where you came from
   
• Functional: be able to navigate. Go back, undo, skip, or "deep link" into some functionality of the app
   
• Infrastructural: consolidate ceremonies that need to be done before rendering a new screen.​​​

Why Navigation is scary?

Navigation in React Native

• NavigatorIOS
• Navigator
• NavigationExperimental
• React Navigation

NavigatorIOS

   
   <NavigatorIOS

      initialRoute={{

        component: MyScene,

        title: "My Initial Scene",

        passProps: { myProp: "foo" },

     }}

   />
 

   
   renderScene(route, navigator) {

      if(route.name == 'Main') {

        return <Main navigator={navigator} />

      }

      if(route.name == 'Home') {

        return <Home navigator={navigator} />

      }

    },
 

  this.props.navigator.push(routeName: "Home");
  this.props.navigator.pop();
 

Navigator

   <Navigator

      initialRoute={{ title: "Awesome Scene", index: 0 }}

      renderScene={(route, navigator) =>

         <Text>

            Hello {route.title}!

         </Text>
       }

   />
 

   
   renderScene(route, navigator) {

      if(route.name == 'Main') {

        return <Main navigator={navigator} />

      }

      if(route.name == 'Home') {

        return <Home navigator={navigator} />

      }

    },
 

NavigationExperimental

• NavigationExperimental
• Ex-Navigation (from Expo)
• React Native Router Flux

React Native Router Flux

   import { Scene, Router } from "react-native-router-flux";

 

   class App extends React.Component {

     render() {

       return (

         <Router>

           <Scene key="root">

             <Scene key="login" component={Login} title="Login" />

             <Scene key="register" component={Register} title="Register" />

             <Scene key="home" component={Home} />

           </Scene>

         </Router>

       );

     }

   }
 

  
  import { Actions } from "react-native-router-flux";

  Actions.ACTION_NAME(PARAMS)

  Actions.pop()
  Actions.refresh(PARAMS)

React Native Router Flux

   import { Scene, Router } from "react-native-router-flux";
   import { connect } from "react-redux";

   
   const RouterWithRedux = connect()(Router);
   

   class App extends React.Component {

     render() {

       return (

           <Provider store={store}>

               <RouterWithRedux>
                   // scenes here
              </RouterWithRedux>

          </Provider>;

       );

     }

   }
 

With Redux

React Navigation

    import { StackNavigator } from "react-navigation";

    const App = StackNavigator(

      {

        Home: { screen: HomeScreen },

        Profile: { screen: ProfileScreen },

      },

      {

        initialRouteName: "Home",

      }

    );

  
  this.props.navigation

  navigate

  state
  setParams
  goBack

  dispatch

React Navigation

   const initialState = AppNavigator.router.getStateForAction(AppNavigator.router.getActionForPathAndParams("Page1"));

 

   const navReducer = (state = initialState, action) => {

       const nextState = AppNavigator.router.getStateForAction(action, state);

       return nextState || state;

   };

 

   const appReducer = combineReducers({

      nav: navReducer,

   });

 

   <AppNavigator

        navigation={addNavigationHelpers({

          dispatch: this.props.dispatch,

          state: this.props.nav,

        })}
   />

 

With Redux

Demo

Other Popular Navigators

Native Navigation

React Native Navigation

Questions?

Thank You