import React from '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  */ const Router = createRouter(() => ({ home: () => HomeScreen, })); class App extends React.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 ( <NavigationProvider router={Router}> <StackNavigation initialRoute={Router.getRoute('home')} /> </NavigationProvider> ); } } class HomeScreen extends React.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.  */ static route = { navigationBar: { title: 'Home', } } render() { return ( <View style={{alignItems: 'center', justifyContent: 'center', flex: 1}}> <Text>HomeScreen!</Text> </View> ) } } AppRegistry.registerComponent('main', () => App);

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

 class HomeScreen extends React.Component { _goToAbout = () => { this.props.navigator.push(Router.getRoute('about', {name: 'Brent'})); } } class AboutScreen extends React.Component { static route = { navigationBar: { title: 'Title goes here', renderRight: (route, props) => <SignOutButton name={route.params.name} /> } } // ... } @connect() class SignOutButton extends React.Component { render() { return ( <TouchableOpacity onPress={this.props.dispatch(Actions.signOut())}> <Text>Sign out {this.props.name}</Text> </TouchableOpacity> ); } }

class App extends React.Component { render() { return ( <NavigationProvider router={Router}> <StackNavigation defaultRouteConfig={{ navigationBar: { backgroundColor: '#000', tintColor: '#fff', } }} initialRoute={Router.getRoute('home')} /> </NavigationProvider> ); } }

import { StackNavigation, TabNavigation, TabNavigationItem as TabItem, } 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 StackNavigation class TabScreen extends React.Component { static route = { navigationBar: { visible: false, } } render() { return ( <TabNavigation id="main" navigatorUID="main" initialTab="home"> <TabItem id="home" title="Home" selectedStyle={styles.selectedTab} renderIcon={(isSelected) => <Image source={require('./assets/images/home.png')} /> }> <StackNavigation id="home" navigatorUID="home" initialRoute={Router.getRoute('home')} /> </TabItem> <TabItem id="posts" title="Posts" selectedStyle={styles.selectedTab} renderIcon={(isSelected) => <Image source={require('./assets/images/posts.png')} /> }> <StackNavigation id="posts" initialRoute={Router.getRoute('posts')} /> </TabItem> <TabItem id="profile" title="Profile" selectedStyle={styles.selectedTab} renderIcon={(isSelected) => <Image source={require('./assets/images/profile.png')} /> }> <StackNavigation id="profile" initialRoute={Router.getRoute('profile')} /> </TabItem> </TabNavigation> ); } }

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

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 StackNavigation class DrawerNavigationLayout extends React.Component { static route = { navigationBar: { visible: false, } }; render() { return ( <DrawerNavigation id='main' initialItem='home' drawerWidth={300} renderHeader={this._renderHeader} > <DrawerNavigationItem id='home' selectedStyle={styles.selectedItemStyle} renderTitle={isSelected => this._renderTitle('Home', isSelected)} > <StackNavigation id='home' initialRoute={Router.getRoute('home')} /> </DrawerNavigationItem> <DrawerNavigationItem id='about' selectedStyle={styles.selectedItemStyle} renderTitle={isSelected => this._renderTitle('About', isSelected)} > <StackNavigation id='about' initialRoute={Router.getRoute('about')} /> </DrawerNavigationItem> </DrawerNavigation> ); } _renderHeader = () => { return ( <View style={styles.header}> </View> ); }; _renderTitle(text: string, isSelected: boolean) { return ( <Text style={[styles.titleText, isSelected ? styles.selectedTitleText : {}]}> {text} </Text> ); }; } const styles = StyleSheet.create({ header: { height: 20 }, selectedItemStyle: { backgroundColor: 'blue' }, titleText: { fontWeight: 'bold' }, selectedTitleText: { color: 'white' } });

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

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

import { NavigationActions } from '@expo/ex-navigation' import Store from '../state/Store'; import Router from './Router' export default function goHome() { let navigatorUID = Store.getState().navigation.currentNavigatorUID; Store.dispatch(NavigationActions.push(navigatorUID, Router.getRoute('home'))) }

import SegmentIO from 'react-native-segment-io-analytics'; const navigationStateKey = 'navigation'; // gets the current screen from navigation state function getCurrentScreen(getStateFn) { const navigationState = getStateFn()[navigationStateKey]; // navigationState can be null when exnav is initializing if (!navigationState) return null; const { currentNavigatorUID, navigators } = navigationState; if (!currentNavigatorUID) return null; const { index, routes } = navigators[currentNavigatorUID]; const { routeName } = routes[index]; return routeName; } const screenTracking = ({ getState }) => next => action => { if (!action.type.startsWith('EX_NAVIGATION')) return next(action); const currentScreen = getCurrentScreen(getState); const result = next(action); const nextScreen = getCurrentScreen(getState); if (nextScreen !== currentScreen) { SegmentIO.screen(nextScreen); } return result; } export default screenTracking;