react-native-navigation-redux-integration

0.6.1 • Public • Published

react-native-navigation-redux-integration

npm dependencies codecov CircleCI

Redux integration for React Native Navigation v2+. Keeps all you current navigation state in redux store.

Prerequisites

This integration works only with react-native-navigation v2+ and with redux store configured in a project.

Installing

npm install --save react-native-navigation-redux-integration
yarn add react-native-navigation-redux-integration

Next, adding initialization for library :

import { Navigation } from 'react-native-navigation';
import { initNavigatorListeners } from 'react-native-navigation-redux-integration';
import { store } from '{your path to store here}';

initNavigatorListeners(Navigation, store);
.
.
.
//register RNN screen and setRoot here

Adding navigation reducer :

import { reducer as navigationReducer } from 'react-native-navigation-redux-integration';
.
.
.
//This is root reducer
export default combineReducers({
  .
  . // other reducers
  .,
  navigation: navigationReducer
})

Adding react-native-navigation-redux-integration for navigating with dispatching store actions :

import { navigatorMiddleware } from 'react-native-navigation-redux-integration';
.
.
.
export const store = createStore(reducers, applyMiddleware(navigatorMiddleware));

Selectors

getActiveScreenId(state)

getActiveStackId(state)

getActiveTopTabsId(state)

getActiveBottomTabsId(state)

getActiveSideMenuCenterId(state)

getActiveSideMenuLeftId(state)

getActiveSideMenuRightId(state)

getActiveSideMenuRootId(state)

getActiveStackArray(state)

Action creator

Actions are dispatch and handled by navigation middleware.

push(layout: RNN Layout, [options: { [bottomTabIndex]:number, [topTabIndex]:number }])

Push new screen on active stack or if tab index defined, push new screen to other tab

pop(mergeOptions:RNN mergeOptions)

Pop screen from active stack

popToRoot(mergeOptions:RNN mergeOptions)

Pop active stack to root

setStackRoot(params: RNN params for setStackRoot method)

Set root to active stack

dismissLastModal(mergeOptions:RNN mergeOptions)

Dismiss last active modal

showModal(layout: RNN Layout)

Show modal

showOverlay(layout: RNN Layout)

Show overlay

License

This project is licensed under the MIT License - see the LICENSE file for details

Package Sidebar

Install

npm i react-native-navigation-redux-integration

Weekly Downloads

2

Version

0.6.1

License

MIT

Unpacked Size

42.1 kB

Total Files

13

Last publish

Collaborators

  • manicant