diff --git a/packages/react-navigation/examples/ReduxExample/App.js b/packages/react-navigation/examples/ReduxExample/App.js
index aa381200..647c8686 100644
--- a/packages/react-navigation/examples/ReduxExample/App.js
+++ b/packages/react-navigation/examples/ReduxExample/App.js
@@ -4,19 +4,15 @@ import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import AppReducer from './src/reducers';
-import AppWithNavigationState from './src/navigators/AppNavigator';
-import { middleware } from './src/utils/redux';
+import { AppNavigator, middleware } from './src/navigators/AppNavigator';
-const store = createStore(
- AppReducer,
- applyMiddleware(middleware),
-);
+const store = createStore(AppReducer, applyMiddleware(middleware));
class ReduxExampleApp extends React.Component {
render() {
return (
-
+
);
}
diff --git a/packages/react-navigation/examples/ReduxExample/assets/icons/react-navigation.png b/packages/react-navigation/examples/ReduxExample/assets/icons/react-navigation.png
index 9f56a231..f40ff6b5 100644
Binary files a/packages/react-navigation/examples/ReduxExample/assets/icons/react-navigation.png and b/packages/react-navigation/examples/ReduxExample/assets/icons/react-navigation.png differ
diff --git a/packages/react-navigation/examples/ReduxExample/package.json b/packages/react-navigation/examples/ReduxExample/package.json
index 7afa6115..c9ac3233 100644
--- a/packages/react-navigation/examples/ReduxExample/package.json
+++ b/packages/react-navigation/examples/ReduxExample/package.json
@@ -26,7 +26,7 @@
"react": "16.3.1",
"react-native": "^0.55.0",
"react-navigation": "link:../..",
- "react-navigation-redux-helpers": "^1.0.0",
+ "react-navigation-redux-helpers": "^2.0.0-beta.1",
"react-redux": "^5.0.6",
"redux": "^3.7.2"
},
diff --git a/packages/react-navigation/examples/ReduxExample/src/navigators/AppNavigator.js b/packages/react-navigation/examples/ReduxExample/src/navigators/AppNavigator.js
index ceacbd3b..7b68a86f 100644
--- a/packages/react-navigation/examples/ReduxExample/src/navigators/AppNavigator.js
+++ b/packages/react-navigation/examples/ReduxExample/src/navigators/AppNavigator.js
@@ -2,43 +2,32 @@ import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { createStackNavigator } from 'react-navigation';
-import { initializeListeners } from 'react-navigation-redux-helpers';
+import {
+ reduxifyNavigator,
+ createReactNavigationReduxMiddleware,
+} from 'react-navigation-redux-helpers';
import LoginScreen from '../components/LoginScreen';
import MainScreen from '../components/MainScreen';
import ProfileScreen from '../components/ProfileScreen';
-import { navigationPropConstructor } from '../utils/redux';
-export const AppNavigator = createStackNavigator({
+const middleware = createReactNavigationReduxMiddleware(
+ 'root',
+ state => state.nav
+);
+
+const RootNavigator = createStackNavigator({
Login: { screen: LoginScreen },
Main: { screen: MainScreen },
Profile: { screen: ProfileScreen },
});
-class AppWithNavigationState extends React.Component {
- static propTypes = {
- dispatch: PropTypes.func.isRequired,
- nav: PropTypes.object.isRequired,
- };
-
- componentDidMount() {
- initializeListeners('root', this.props.nav);
- }
-
- render() {
- const { dispatch, nav } = this.props;
- this._navigation = navigationPropConstructor(
- dispatch,
- nav,
- AppNavigator.router,
- () => this._navigation
- );
- return ;
- }
-}
+const AppWithNavigationState = reduxifyNavigator(RootNavigator, 'root');
const mapStateToProps = state => ({
- nav: state.nav,
+ state: state.nav,
});
-export default connect(mapStateToProps)(AppWithNavigationState);
+const AppNavigator = connect(mapStateToProps)(AppWithNavigationState);
+
+export { RootNavigator, AppNavigator, middleware };
diff --git a/packages/react-navigation/examples/ReduxExample/src/reducers/index.js b/packages/react-navigation/examples/ReduxExample/src/reducers/index.js
index 1ece9bcd..3593b7d3 100644
--- a/packages/react-navigation/examples/ReduxExample/src/reducers/index.js
+++ b/packages/react-navigation/examples/ReduxExample/src/reducers/index.js
@@ -1,13 +1,13 @@
import { combineReducers } from 'redux';
import { NavigationActions } from 'react-navigation';
-import { AppNavigator } from '../navigators/AppNavigator';
+import { RootNavigator } from '../navigators/AppNavigator';
// Start with two routes: The Main screen, with the Login screen on top.
-const firstAction = AppNavigator.router.getActionForPathAndParams('Main');
-const tempNavState = AppNavigator.router.getStateForAction(firstAction);
-const secondAction = AppNavigator.router.getActionForPathAndParams('Login');
-const initialNavState = AppNavigator.router.getStateForAction(
+const firstAction = RootNavigator.router.getActionForPathAndParams('Main');
+const tempNavState = RootNavigator.router.getStateForAction(firstAction);
+const secondAction = RootNavigator.router.getActionForPathAndParams('Login');
+const initialNavState = RootNavigator.router.getStateForAction(
secondAction,
tempNavState
);
@@ -16,19 +16,19 @@ function nav(state = initialNavState, action) {
let nextState;
switch (action.type) {
case 'Login':
- nextState = AppNavigator.router.getStateForAction(
+ nextState = RootNavigator.router.getStateForAction(
NavigationActions.back(),
state
);
break;
case 'Logout':
- nextState = AppNavigator.router.getStateForAction(
+ nextState = RootNavigator.router.getStateForAction(
NavigationActions.navigate({ routeName: 'Login' }),
state
);
break;
default:
- nextState = AppNavigator.router.getStateForAction(action, state);
+ nextState = RootNavigator.router.getStateForAction(action, state);
break;
}
diff --git a/packages/react-navigation/examples/ReduxExample/src/utils/redux.js b/packages/react-navigation/examples/ReduxExample/src/utils/redux.js
deleted file mode 100644
index 23d4ad26..00000000
--- a/packages/react-navigation/examples/ReduxExample/src/utils/redux.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import {
- createReactNavigationReduxMiddleware,
- createNavigationPropConstructor,
-} from 'react-navigation-redux-helpers';
-
-const middleware = createReactNavigationReduxMiddleware(
- 'root',
- state => state.nav
-);
-const navigationPropConstructor = createNavigationPropConstructor('root');
-
-export { middleware, navigationPropConstructor };
diff --git a/packages/react-navigation/examples/ReduxExample/yarn.lock b/packages/react-navigation/examples/ReduxExample/yarn.lock
index 1652a94d..84c46b2e 100644
--- a/packages/react-navigation/examples/ReduxExample/yarn.lock
+++ b/packages/react-navigation/examples/ReduxExample/yarn.lock
@@ -5728,9 +5728,9 @@ react-navigation-drawer@0.3.0:
dependencies:
react-native-drawer-layout-polyfill "^1.3.2"
-react-navigation-redux-helpers@^1.0.0:
- version "1.1.2"
- resolved "https://registry.yarnpkg.com/react-navigation-redux-helpers/-/react-navigation-redux-helpers-1.1.2.tgz#13013230ac74aa125a5505eefc005db3801f9e07"
+react-navigation-redux-helpers@^2.0.0-beta.1:
+ version "2.0.0-beta.1"
+ resolved "https://registry.yarnpkg.com/react-navigation-redux-helpers/-/react-navigation-redux-helpers-2.0.0-beta.1.tgz#7fcbce69418fe9084f2096c7ff4c9f93965126d3"
dependencies:
invariant "^2.2.2"