Installations

npm install react-native-navigation-redux-helpers-compat

Developer Guide

BETA

Typescript

No

Module System

CommonJS

Node Version

8.1.2

NPM Version

5.3.0 Score

66.4

Supply Chain

95.6

Quality

73.8

Maintenance

50

Vulnerability

99.6

License

Pull Requests

Open

0

Total

0

Closed

0

Issues

Open

0

Total

0

Closed

0

Releases

Unable to fetch releases

Languages

2

JavaScript

HTML

JavaScript (97.16%)

HTML (2.84%)

Developer

azundo

Download Statistics

Total Downloads

968

Last Day

2

Last Week

3

Last Month

14

Last Year

97

GitHub Statistics

MIT License

25 Commits

1 Watchers

1 Branches

1 Contributors

Updated on Apr 16, 2018

Bundle Size

5.03 kB

Minified

1.48 kB

Minified + Gzipped

Bundlephobia

Maintainers

1

View All 1 Contributors

Package Meta Information

Latest Version

0.6.0

Package Id

react-native-navigation-redux-helpers-compat@0.6.0

Size

21.52 kB

NPM Version

5.3.0

Node Version

8.1.2

Total Downloads

Cumulative downloads

Total Downloads

968

Last Day

100%

2

Compared to previous day

Last Week

0%

3

Compared to previous week

Last Month

16.7%

14

Compared to previous month

Last Year

-27.6%

97

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

1

react-native-navigation-experimental-compat

Peer Dependencies

1

react-native-navigation-experimental-compat

Dev Dependencies

29

React Native Navigation Redux helpers

Reducers and actions to implement navigation in React Native applications (RN 0.28.0+)

When to use this

you are using RN ExperimentalNavigation
you are using Redux
you do not want to write and re-write your own actions and reducers for navigation

Getting started

1npm install --save react-native-navigation-redux-helpers-compat

Card navigation

Define your card reducer

1import { cardStackReducer } from 'react-native-navigation-redux-helpers-compat';
2
3const initialState = {
4  key: 'global',
5  index: 0,
6  routes: [
7    {
8	  key: 'applicationSection1',
9      index: 0
10    },
11  ],
12};
13
14module.exports = cardStackReducer(initialState);

Use this reducer in NavigationCardStack in your component

1import NavigationExperimental from 'react-native-navigation-experimental-compat';
2import React, { Component } from 'react';
3import { connect } from 'react-redux';
4import { actions } from 'react-native-navigation-redux-helpers-compat';
5
6const {
7  popRoute,
8  pushRoute,
9} = actions;
10
11const {
12  CardStack: NavigationCardStack
13} = NavigationExperimental;
14
15class GlobalNavigation extends Component {
16	render() {
17		return (
18      <NavigationCardStack
19        navigationState={this.props.navigation}
20        renderOverlay={this._renderOverlay}
21        renderScene={this._renderScene}
22      />
23		);
24	}
25
26  /* ... */
27
28	onGoBack() {
29    const { dispatch, navigation } = this.props;
30    dispatch(popRoute(navigation.key));
31	}
32
33  onGoSomewhere() {
34    const { dispatch, navigation } = this.props;
35    dispatch(pushRoute({ key: 'sowhere else' }, navigation.key));
36  }
37}
38
39function mapDispatchToProps(dispatch) {
40	return {
41		dispatch
42	};
43}
44
45function mapStateToProps(state) {
46	return {
47	    // XX: assuming you've registered the reducer above under the name 'cardNavigation'
48		navigation: state.cardNavigation
49	};
50}
51
52export default connect(mapStateToProps, mapDispatchToProps)(GlobalNavigation);
53

Tab navigation

Define your tab reducer

1import { tabReducer } from 'react-native-navigation-redux-helpers';
2
3const tabs = {
4  routes: [
5    { key: 'feed', title: 'Items' },
6    { key: 'notifications', title: 'Notifications' },
7    { key: 'settings', title: 'Settings' }
8  ],
9  key: 'ApplicationTabs',
10  index: 0
11};
12
13module.exports = tabReducer(tabs);

And now put it to good use inside your component

1import { TabBarIOS } from 'react-native';
2import React, { Component } from 'react';
3import Feed from '../Feed';
4import { connect } from 'react-redux';
5import { actions as navigationActions } from 'react-native-navigation-redux-helpers-compat';
6
7const { jumpTo } = navigationActions;
8
9class ApplicationTabs extends Component {
10	_renderTabContent(tab) {
11		if (tab.key === 'feed') {
12			return (
13				<Feed />
14			);
15		}
16
17		/* ... */
18	}
19
20	render() {
21		const { dispatch, navigation } = this.props;
22		const children = navigation.routes.map( (tab, i) => {
23			return (
24				<TabBarIOS.Item key={tab.key}
25						icon={tab.icon}
26						selectedIcon={tab.selectedIcon}
27						title={tab.title} onPress={ () => dispatch(jumpTo(i, navigation.key)) }
28						selected={this.props.navigation.index === i}>
29						{ this._renderTabContent(tab) }
30				</TabBarIOS.Item>
31			);
32		});
33		return (
34			<TabBarIOS tintColor="black">
35				{children}
36			</TabBarIOS>
37		);
38	}
39}
40
41function mapDispatchToProps(dispatch) {
42	return {
43		dispatch
44	};
45}
46
47function mapStateToProps(state) {
48	return {
49		// XX: assuming your tab reducer is registered as 'tabs'
50		navigation: state.tabs
51	};
52}
53export default connect(mapStateToProps, mapDispatchToProps)(ApplicationTabs);

Supported actions

cardStackReducer

pushRoute
popRoute
jumpTo
reset
replaceAt
replaceAtIndex
jumpToIndex
back
forward

tabReducer

jumpTo
jumpToIndex

Complete examples

No vulnerabilities found.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

10

License

Determines if the project has defined a license.

0

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Maintained

Determines if the project is "actively maintained".

0

SAST

Determines if the project uses static code analysis.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

Score

3

/10

Last Scanned on 2025-06-23

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More