ExNavigation

A few of our favorite features

Help / Support / Questions

Installation

{  "presets": ["react-native-stage-0/decorator-support"]}

How to run the example project

How is this different from what is built into React Native?

A minimal navigation set up

importReactfrom'react';import{AppRegistry,Text,View,}from'react-native';/** * If you're using Expo, uncomment the line below to import Exponent * BEFORE importing `@expo/ex-navigation`. This sets the status bar * offsets properly. */// import Expo from 'expo';import{createRouter,NavigationProvider,StackNavigation,}from'@expo/ex-navigation';/**  * This is where we map route names to route components. Any React  * component can be a route, it only needs to have a static `route`  * property defined on it, as in HomeScreen below  */constRouter=createRouter(()=>({home:()=>HomeScreen,}));classAppextendsReact.Component{render(){/**      * NavigationProvider is only needed at the top level of the app,      * similar to react-redux's Provider component. It passes down      * navigation objects and functions through context to children.      *      * StackNavigation represents a single stack of screens, you can      * think of a stack like a stack of playing cards, and each time      * you add a screen it slides in on top. Stacks can contain      * other stacks, for example if you have a tab bar, each of the      * tabs has its own individual stack. This is where the playing      * card analogy falls apart, but it's still useful when thinking      * of individual stacks.      */return(<NavigationProviderrouter={Router}><StackNavigationinitialRoute={Router.getRoute('home')}/></NavigationProvider>);}}classHomeScreenextendsReact.Component{/**    * This is where we can define any route configuration for this    * screen. For example, in addition to the navigationBar title we    * could add backgroundColor.    */staticroute={navigationBar:{title:'Home',}}render(){return(<Viewstyle={{alignItems:'center',justifyContent:'center',flex:1}}><Text>HomeScreen!</Text></View>)}}AppRegistry.registerComponent('main',()=>App);

Push and popping routes

 const Router = createRouter(() => ({   home: () => HomeScreen,+  about: () => AboutScreen, })); class HomeScreen extends React.Component {    render() {     return (       <View style={{alignItems: 'center', justifyContent: 'center', flex: 1}}>         <Text>HomeScreen!</Text>+        <Text onPress={this._goToAbout}>+          Push about route+        </Text>       </View>     )   }++  _goToAbout = () => {+    this.props.navigator.push(Router.getRoute('about'));+  } }+ class AboutScreen extends React.Component {+  static route = {+    navigationBar: {+      title: 'About',+    }+  }++  render() {+    return (+      <View style={{alignItems: 'center', justifyContent: 'center', flex: 1}}>+        <Text>AboutScreen!</Text>+        <Text onPress={this._goBackHome}>+          Go back home+        </Text>+      </View>+    )+  }++  _goBackHome = () => {+    this.props.navigator.pop();+  }+}

importReactfrom'react';import{Text}from'react-native';import{withNavigation}from'@expo/ex-navigation';@withNavigationclassBackButtonextendsReact.Component{render(){return<TextonPress={this._goBack}>Go back</Text>}_goBack=()=>{if(this.props.navigator.getCurrentIndex()>0){this.props.navigator.pop();}}}

_goToAbout = () => {-  this.props.navigator.push(Router.getRoute('about'));+  this.props.navigator.push('about');}

Passing params to a route

  class HomeScreen extends React.Component {   _goToAbout = () => {-    this.props.navigator.push(Router.getRoute('about'));+    this.props.navigator.push(Router.getRoute('about', {name: 'Brent'}));   } } class AboutScreen extends React.Component {   static route = {     navigationBar: {-      title: 'About',+      title(params) {+        return `Greeting for ${params.name}`;+      },     }   }   render() {     return (       <View style={{alignItems: 'center', justifyContent: 'center', flex: 1}}>-        <Text>AboutScreen!</Text>+        <Text>AboutScreen! Hello {this.props.route.params.name}</Text>         <Text onPress={this._goBackHome}>           Go back home         </Text>

Updating route params

 class AboutScreen extends React.Component {   static route = {     navigationBar: {       title(params) {-        return `Greeting for ${params.name}`;+        if (typeof params.isCool === 'undefined') {+          return '';+        }++        return params.isCool ? `Hey cool person!` : `zzz`;       },     }   }+  componentDidMount() {+    setTimeout(() => {+      this.props.navigator.updateCurrentRouteParams({+        isCool: this.props.route.params.name === 'Brent'+      })+    }, 1000);+  }+

Make navigation bar buttons update based on route or app state

StackNavigation actions

Working with the navigation bar

On a route component

classHomeScreenextendsReact.Component{_goToAbout=()=>{this.props.navigator.push(Router.getRoute('about',{name:'Brent'}));}}classAboutScreenextendsReact.Component{staticroute={navigationBar:{title:'Title goes here',renderRight:(route,props)=><SignOutButtonname={route.params.name}/>}}// ...} @connect()classSignOutButtonextendsReact.Component{render(){return(<TouchableOpacityonPress={this.props.dispatch(Actions.signOut())}><Text>Sign out{this.props.name}</Text></TouchableOpacity>);}}

On StackNavigation

classAppextendsReact.Component{render(){return(<NavigationProviderrouter={Router}><StackNavigationdefaultRouteConfig={{navigationBar:{backgroundColor:'#000',tintColor:'#fff',}}}initialRoute={Router.getRoute('home')}/></NavigationProvider>);}}

navigationBar properties

TabNavigation

import{StackNavigation,TabNavigation,TabNavigationItemasTabItem,}from'@expo/ex-navigation';// Treat the TabScreen route like any other route -- you may want to set// it as the initial route for a top-level StackNavigationclassTabScreenextendsReact.Component{staticroute={navigationBar:{visible:false,}}render(){return(<TabNavigationid="main"navigatorUID="main"initialTab="home"><TabItemid="home"title="Home"selectedStyle={styles.selectedTab}renderIcon={(isSelected)=><Imagesource={require('./assets/images/home.png')}/>}><StackNavigationid="home"navigatorUID="home"initialRoute={Router.getRoute('home')}/></TabItem><TabItemid="posts"title="Posts"selectedStyle={styles.selectedTab}renderIcon={(isSelected)=><Imagesource={require('./assets/images/posts.png')}/>}><StackNavigationid="posts"initialRoute={Router.getRoute('posts')}/></TabItem><TabItemid="profile"title="Profile"selectedStyle={styles.selectedTab}renderIcon={(isSelected)=><Imagesource={require('./assets/images/profile.png')}/>}><StackNavigationid="profile"initialRoute={Router.getRoute('profile')}/></TabItem></TabNavigation>);}}

<TouchableOpacityonPress={()=>{this.props.navigation.performAction(({ tabs, stacks})=>{tabs('main').jumpToTab('profile');stacks('home').push(route);});}}/>

DrawerNavigation

import{StackNavigation,DrawerNavigation,DrawerNavigationItem,}from'@expo/ex-navigation';// Treat the DrawerNavigationLayout route like any other route -- you may want to set// it as the intiial route for a top-level StackNavigationclassDrawerNavigationLayoutextendsReact.Component{staticroute={navigationBar:{visible:false,}};render(){return(<DrawerNavigationid='main'initialItem='home'drawerWidth={300}renderHeader={this._renderHeader}><DrawerNavigationItemid='home'selectedStyle={styles.selectedItemStyle}renderTitle={isSelected=>this._renderTitle('Home',isSelected)}><StackNavigationid='home'initialRoute={Router.getRoute('home')}/></DrawerNavigationItem><DrawerNavigationItemid='about'selectedStyle={styles.selectedItemStyle}renderTitle={isSelected=>this._renderTitle('About',isSelected)}><StackNavigationid='about'initialRoute={Router.getRoute('about')}/></DrawerNavigationItem></DrawerNavigation>);}_renderHeader=()=>{return(<Viewstyle={styles.header}></View>);};_renderTitle(text:string,isSelected:boolean){return(<Textstyle={[styles.titleText,isSelected ?styles.selectedTitleText :{}]}>{text}</Text>);};}conststyles=StyleSheet.create({header:{height:20},selectedItemStyle:{backgroundColor:'blue'},titleText:{fontWeight:'bold'},selectedTitleText:{color:'white'}});

Integrate with your existing Redux store

/* Your store definition, let's say state/Store.js */import{createNavigationEnabledStore,NavigationReducer}from'@expo/ex-navigation';import{combineReducers,createStore}from'redux';constcreateStoreWithNavigation=createNavigationEnabledStore({  createStore,navigationStateKey:'navigation',});conststore=createStoreWithNavigation(/* combineReducers and your normal create store things here! */combineReducers({navigation:NavigationReducer,// other reducers}));exportdefaultstore;

/* Your routes, Router.js */import{createRouter}from'@expo/ex-navigation';importHomeScreenfrom'./HomeScreen';exportconstRouter=createRouter(()=>({home:()=>HomeScreen,}));

 /* The top level of your app, often in main.js or index.[ios/android].js */ import {   NavigationContext,   NavigationProvider,   StackNavigation, } from '@expo/ex-navigation'; import Store from './state/Store'; import Router from './Router';+const navigationContext = new NavigationContext({+  router: Router,+  store: Store,+}) return (   <Provider store={Store}>+    <NavigationProvider context={navigationContext}>       <StackNavigation yourUsualPropsHere />     </NavigationProvider>   </Provider> )

Perform navigation actions from outside of a component

import{NavigationActions}from'@expo/ex-navigation'importStorefrom'../state/Store';importRouterfrom'./Router'exportdefaultfunctiongoHome(){letnavigatorUID=Store.getState().navigation.currentNavigatorUID;Store.dispatch(NavigationActions.push(navigatorUID,Router.getRoute('home')))}

Screen Tracking / Analytics

importSegmentIOfrom'react-native-segment-io-analytics';constnavigationStateKey='navigation';// gets the current screen from navigation statefunctiongetCurrentScreen(getStateFn){constnavigationState=getStateFn()[navigationStateKey];// navigationState can be null when exnav is initializingif(!navigationState)returnnull;const{ currentNavigatorUID, navigators}=navigationState;if(!currentNavigatorUID)returnnull;const{ index, routes}=navigators[currentNavigatorUID];const{ routeName}=routes[index];returnrouteName;}constscreenTracking=({ getState})=>next=>action=>{if(!action.type.startsWith('EX_NAVIGATION'))returnnext(action);constcurrentScreen=getCurrentScreen(getState);constresult=next(action);constnextScreen=getCurrentScreen(getState);if(nextScreen!==currentScreen){SegmentIO.screen(nextScreen);}returnresult;}exportdefaultscreenTracking;

Android back button handling

<AndroidBackButtonBehavior isFocused={someboolean}   onBackButtonPress={()=>Promise.resolve(fireMeWhenSomeBooleanIsTrue)}>   ...</AndroidBackButtonBehavior>