ex-navigation-redux-persist.js

import React from 'react';
import {
  AppRegistry,
  Text,
  View,
  AsyncStorage
} from 'react-native';

import {
  createRouter,
  NavigationContext,
  NavigationProvider,
  StackNavigation,
  createNavigationEnabledStore,
  NavigationReducer
} from '@exponent/ex-navigation';
import { combineReducers, createStore, compose } from 'redux';
import { persistStore, autoRehydrate } from 'redux-persist'

// Combination of ex-navigation example with redux-persist
// https://github.com/exponent/ex-navigation#integrate-with-your-existing-redux-store
// https://github.com/rt2zz/redux-persist/blob/master/docs/recipes.md#react-native

const createStoreWithNavigation = createNavigationEnabledStore({
  createStore,
  navigationStateKey: 'navigation',
});

const store = compose(autoRehydrate())(createStoreWithNavigation(
  /* combineReducers and your normal create store things here! */
  combineReducers({
    navigation: NavigationReducer,
    // other reducers
  })
));

/**
 * 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,
  about: () => AboutScreen,
}));

class App extends React.Component {

  state = {
    restored: false
  };

  navigationContext = new NavigationContext({
    router: router,
    store: store,
  });

  componentDidMount() {
    persistStore(store, {storage: AsyncStorage}, () => {
      console.log('restored');
      this.setState({restored: true})
    });
  }

  render() {
    if (!this.state.restored) {
      return (
          <Text>Restoring...</Text>
      )
    } else {
    /**
     * 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 context={this.navigationContext}>
          <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>
          <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();
  }
}

AppRegistry.registerComponent('untitled1', () => App);