React Navigation wrapper for easier Redux integration.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.

React Navigation Redux

Simple React Navigation wrapper for easier Redux integration for those who prefers "one router one state" approach.


Creating Routes

For routing, you can use either:

  • TabNavigator
  • StackNavigator
  • DrawerNavigator (not tested yet)

Specify your route configs, stack navigator configs or tab navigator configs, and the name of your Redux reducer key that holds the state for that particular route.

import {TabNavigator, StackNavigator, DrawerNavigator} from 'react-navigation-redux';

let Router1 = TabNavigator(routeConfigs, navigatorConfigs)('tabReducerKey');
let Router2 = StackNavigator(routeConfigs, navigatorConfigs)('stackReducerKey');
let Router3 = DrawerNavigator(routeConfigs, navigatorConfigs)('drawerReducerKey');

Adding Reducers

Then on your root reducer, import your router and navigationReducer.

import {navigationReducer} from 'react-navigation-redux';
import {combineReducers} from 'redux';

import Router1 from './your/router/path/';
import Router2 from './your/router/path/';
import Router3 from './your/router/path/';

export default combineReducers({
  tabNavigationState: navigationReducer(Router1),
  stackNavigationState: navigationReducer(Router2),
  drawerNavigationState: navigationReducer(Router3),

Changing Route

List of navigation actions is stated in the react navigation docs.

Here are some of the basic actions you can do:

// navigate to a route
  type: 'Navigation/NAVIGATE',
  routeName: 'foo',
  params: {}

// navigate back
  type: 'Navigation/BACK',

Basically the action types are:

Action Type

That's it! :)