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

Card navigation

Define your card reducer

1import { cardStackReducer } from 'react-native-navigation-redux-helpers';
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';
2import React, { Component } from 'react';
3import { connect } from 'react-redux';
4import { actions } from 'react-native-navigation-redux-helpers';
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';
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

• Example using RN experimental navigation with Redux
• TodoMVC React Native