zkrige / react-native-redux-router

React Native Router using Redux architecture

This project is not currently being maintained

If you would like to take over maintenance of this repository, please drop us a note via an Issue.

react-native-router-redux

Router component to be used in your React Native redux applications. Packed with Nav and TabBar support.

Getting started

The easiest way to get started is to check out the example:

cd example/ReduxRouter/
npm install
react-native start

or install it into your React Native application:

npm install -S react-native-router-redux

Import and connect the router in your container:

// reducers/index.js
import { reducer as router } from 'react-native-router-redux';

export {
  router, // the key must be 'router'
};

// hook up the reducers
import * as reducers from '../reducers';
const reducer = combineReducers(reducers);

// import react-native-router-redux
import {
  actions as routerActions,
  NavBar,
  Route,
  Router,
  Schema,
  TabBar,
  TabRoute
} from 'react-native-router-redux';

// connect your state and actions (using react-redux)
const mapStateToProps = state => ({
  router: state.router,
});

const mapDispatchToProps = (dispatch) => ({
  actions: bindActionCreators({
    ...routerActions,
  }, dispatch),
  dispatch,
});

// define your routes
const defaultSchema = {
  navBar: NavBar,
  navLeftColor: '#FFFFFF',
  navTint: '#224655',
  navTitleColor: '#FFFFFF',
  navTitleStyle: {
    fontFamily: 'Avenir Next',
    fontSize: 18,
  },
  statusStyle: 'light-content',
  tabBar: TabBar,
};

class Application extends Component {
  render() {
    return (
      <Router {...this.props} assets={assets} initial="signIn">
        <Schema name="default" {...defaultSchema} />

        <Route name="signIn" component={SignIn} type="reset" hideNavBar={true} />
        <Route name="detail" component={Detail} />
        <TabRoute name="tabBar" barTint='#FFFFFF' tint="#32DEAF">
          <Route name="tab1" component={Master('#111')} title="Home" tabItem={{icon: assets['home'], title: 'Home'}} />
          <Route name="tab2" component={Master('#222')} title="Calendar" tabItem={{icon: assets['calendar'], title: 'Calendar'}} />
          <Route name="tab3" component={Master('#333')} title="Video" tabItem={{icon: assets['video'], title: 'Video'}} />
          <Route name="tab4" component={Master('#444')} title="Profile" tabItem={{icon: assets['profile'], title: 'Profile'}} />
        </TabRoute>
      </Router>
    );
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(Application);

Change route in response to an async action, e. g. a successful login/logout.

// app/actions/loginAction.js 

import {
  actions as routerActions,
} from 'react-native-router-redux';

export function signIn() {
  return dispatch => {
    dispatch({
      type: routerActions.actionTypes.ROUTER_PUSH,
      payload: {
        name: 'detail',
      },
    });
  }
}


export function logout() {
  return dispatch => {
    dispatch({
      type: routerActions.actionTypes.ROUTER_PUSH,
      payload: {
        name: 'signIn',
      },
    });
  }
}

If you need to access the state

// app/actions/loginAction.js 

export function signIn() {
  return (dispatch, getState) => {
    const state =  getState()
    dispatch({
      type: routerActions.actionTypes.ROUTER_PUSH,
      payload: {
        name: 'detail',
      },
    });
  }
}

inspiration

Thanks to aksonov/react-native-router-flux for providing the basis for this package.