‚̧Neocon Propaganda Machine
    Wondering what‚Äôs next for npm?Check out our public roadmap! ¬Ľ

    react-navigation-redux

    0.1.0¬†‚Äʬ†Public¬†‚Äʬ†Published

    React Navigation Redux

    Simple React Navigation wrapper for easier Redux integration.

    Motivation

    This library is a wrapper around React Navigation library for Redux integration suitable for those who got stuck making sense of the documentation (like me).

    Usage

    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
    "Navigation/NAVIGATE"
    "Navigation/BACK"
    "Navigation/INIT"
    "Navigation/RESET"
    "Navigation/SET_PARAMS"
    "Navigation/URI"

    That's it! :)

    Install

    npm i react-navigation-redux

    DownloadsWeekly Downloads

    1

    Version

    0.1.0

    License

    ISC

    Last publish

    Collaborators

    • avatar