diff --git a/packages/react-navigation/examples/ReduxExample/index.js b/packages/react-navigation/examples/ReduxExample/index.js
index 031a3265..c1e66dcc 100644
--- a/packages/react-navigation/examples/ReduxExample/index.js
+++ b/packages/react-navigation/examples/ReduxExample/index.js
@@ -3,145 +3,13 @@
*/
import React from 'react';
-import {
- AppRegistry,
- AsyncStorage,
- Button,
- StyleSheet,
- Text,
- View,
-} from 'react-native';
-import {
- NavigationActions,
- addNavigationHelpers,
- StackNavigator,
-} from 'react-navigation';
-import {
- Provider,
- connect,
-} from 'react-redux';
-import {
- createStore,
- combineReducers,
-} from 'redux';
-import {
- persistStore,
- autoRehydrate,
-} from 'redux-persist';
+import { AppRegistry, AsyncStorage } from 'react-native';
+import { Provider } from 'react-redux';
+import { createStore } from 'redux';
+import { persistStore, autoRehydrate } from 'redux-persist';
-const ProfileScreen = ({ navigation }) => (
-
-
- Profile Screen
-
-
-);
-ProfileScreen.navigationOptions = {
- title: 'Profile',
-};
-
-const LoginScreen = ({ navigation }) => (
-
-
- Screen A
-
-
- This is great
-
-
-);
-LoginScreen.navigationOptions = {
- title: 'Log In',
-};
-
-
-const LoginStatusMessage = connect(state => ({
- isLoggedIn: state.auth.isLoggedIn,
-}))(({ isLoggedIn, dispatch }) => {
- if (!isLoggedIn) {
- return Please log in;
- }
- return (
-
-
- {'You are "logged in" right now'}
-
-
- );
-});
-
-const AuthButton = connect(state => ({
- isLoggedIn: state.auth.isLoggedIn,
-}), dispatch => ({
- logout: () => dispatch({ type: 'Logout' }),
- login: () => dispatch(NavigationActions.navigate({ routeName: 'Login' })),
-}))(({ logout, login, isLoggedIn }) => (
-
-));
-
-const MainScreen = () => (
-
-
-
-
-);
-MainScreen.navigationOptions = {
- title: 'Home Screen',
-};
-
-const AppNavigator = StackNavigator({
- Login: { screen: LoginScreen },
- Main: { screen: MainScreen },
- Profile: { screen: ProfileScreen },
-});
-
-const AppWithNavigationState = connect(state => ({
- nav: state.nav,
-}))(({ dispatch, nav }) => (
-
-));
-
-const initialNavState = {
- index: 1,
- routes: [
- { key: 'InitA', routeName: 'Main' },
- { key: 'InitB', routeName: 'Login' },
- ],
-};
-
-const initialAuthState = { isLoggedIn: false };
-
-const AppReducer = combineReducers({
- nav: (state = initialNavState, action) => {
- if (action.type === 'Login') {
- return AppNavigator.router.getStateForAction(NavigationActions.back(), state);
- }
- if (action.type === 'Logout') {
- return AppNavigator.router.getStateForAction(NavigationActions.navigate({ routeName: 'Login' }), state);
- }
- return AppNavigator.router.getStateForAction(action, state);
- },
- auth: (state = initialAuthState, action) => {
- if (action.type === 'Login') {
- return { ...state, isLoggedIn: true };
- }
- if (action.type === 'Logout') {
- return { ...state, isLoggedIn: false };
- }
- return state;
- },
-});
+import AppReducer from 'src/reducers';
+import AppWithNavigationState from 'src/navigators/AppNavigator';
class ReduxExampleApp extends React.Component {
store = createStore(AppReducer, undefined, autoRehydrate());
@@ -159,23 +27,4 @@ class ReduxExampleApp extends React.Component {
}
}
-const styles = StyleSheet.create({
- container: {
- flex: 1,
- justifyContent: 'center',
- alignItems: 'center',
- backgroundColor: '#F5FCFF',
- },
- welcome: {
- fontSize: 20,
- textAlign: 'center',
- margin: 10,
- },
- instructions: {
- textAlign: 'center',
- color: '#333333',
- marginBottom: 5,
- },
-});
-
AppRegistry.registerComponent('ReduxExample', () => ReduxExampleApp);
diff --git a/packages/react-navigation/examples/ReduxExample/src/components/AuthButton.js b/packages/react-navigation/examples/ReduxExample/src/components/AuthButton.js
new file mode 100644
index 00000000..3077b98e
--- /dev/null
+++ b/packages/react-navigation/examples/ReduxExample/src/components/AuthButton.js
@@ -0,0 +1,28 @@
+import React, { PropTypes } from 'react';
+import { connect } from 'react-redux';
+import { Button } from 'react-native';
+import { NavigationActions } from 'react-navigation';
+
+const AuthButton = ({ logout, login, isLoggedIn }) => (
+
+);
+
+AuthButton.propTypes = {
+ isLoggedIn: PropTypes.bool.isRequired,
+ logout: PropTypes.func.isRequired,
+ login: PropTypes.func.isRequired,
+};
+
+const mapStateToProps = state => ({
+ isLoggedIn: state.auth.isLoggedIn,
+});
+
+const mapDispatchToProps = dispatch => ({
+ logout: () => dispatch({ type: 'Logout' }),
+ login: () => dispatch(NavigationActions.navigate({ routeName: 'Login' })),
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(AuthButton);
diff --git a/packages/react-navigation/examples/ReduxExample/src/components/LoginScreen.js b/packages/react-navigation/examples/ReduxExample/src/components/LoginScreen.js
new file mode 100644
index 00000000..24f18356
--- /dev/null
+++ b/packages/react-navigation/examples/ReduxExample/src/components/LoginScreen.js
@@ -0,0 +1,44 @@
+import React, { PropTypes } from 'react';
+import {
+ Button,
+ StyleSheet,
+ Text,
+ View,
+} from 'react-native';
+
+const styles = StyleSheet.create({
+ container: {
+ flex: 1,
+ justifyContent: 'center',
+ alignItems: 'center',
+ backgroundColor: '#F5FCFF',
+ },
+ welcome: {
+ fontSize: 20,
+ textAlign: 'center',
+ margin: 10,
+ },
+});
+
+const LoginScreen = ({ navigation }) => (
+
+
+ Screen A
+
+
+ This is great
+
+
+);
+
+LoginScreen.propTypes = {
+ navigation: PropTypes.object.isRequired,
+};
+
+LoginScreen.navigationOptions = {
+ title: 'Log In',
+};
diff --git a/packages/react-navigation/examples/ReduxExample/src/components/LoginStatusMessage.js b/packages/react-navigation/examples/ReduxExample/src/components/LoginStatusMessage.js
new file mode 100644
index 00000000..f6de785b
--- /dev/null
+++ b/packages/react-navigation/examples/ReduxExample/src/components/LoginStatusMessage.js
@@ -0,0 +1,45 @@
+import React, { PropTypes } from 'react';
+import { connect } from 'react-redux';
+import {
+ Button,
+ StyleSheet,
+ Text,
+ View,
+} from 'react-native';
+import { NavigationActions } from 'react-navigation';
+
+const styles = StyleSheet.create({
+ welcome: {
+ fontSize: 20,
+ textAlign: 'center',
+ margin: 10,
+ },
+});
+
+const LoginStatusMessage = ({ isLoggedIn, dispatch }) => {
+ if (!isLoggedIn) {
+ return Please log in;
+ }
+ return (
+
+
+ {'You are "logged in" right now'}
+
+
+ );
+};
+
+LoginStatusMessage.propTypes = {
+ isLoggedIn: PropTypes.bool.isRequired,
+ dispatch: PropTypes.func.isRequired,
+};
+
+const mapStateToProps = state => ({
+ isLoggedIn: state.auth.isLoggedIn,
+});
+
+export default connect(mapStateToProps)(LoginStatusMessage);
diff --git a/packages/react-navigation/examples/ReduxExample/src/components/MainScreen.js b/packages/react-navigation/examples/ReduxExample/src/components/MainScreen.js
new file mode 100644
index 00000000..b9a23872
--- /dev/null
+++ b/packages/react-navigation/examples/ReduxExample/src/components/MainScreen.js
@@ -0,0 +1,24 @@
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+
+import LoginStatusMessage from './LoginStatusMessage';
+import AuthButton from './AuthButton';
+
+const styles = StyleSheet.create({
+ container: {
+ flex: 1,
+ justifyContent: 'center',
+ alignItems: 'center',
+ backgroundColor: '#F5FCFF',
+ },
+});
+
+const MainScreen = () => (
+
+
+
+
+);
+MainScreen.navigationOptions = {
+ title: 'Home Screen',
+};
diff --git a/packages/react-navigation/examples/ReduxExample/src/components/ProfileScreen.js b/packages/react-navigation/examples/ReduxExample/src/components/ProfileScreen.js
new file mode 100644
index 00000000..c3208f4b
--- /dev/null
+++ b/packages/react-navigation/examples/ReduxExample/src/components/ProfileScreen.js
@@ -0,0 +1,32 @@
+import React from 'react';
+import {
+ StyleSheet,
+ Text,
+ View,
+} from 'react-native';
+
+const styles = StyleSheet.create({
+ container: {
+ flex: 1,
+ justifyContent: 'center',
+ alignItems: 'center',
+ backgroundColor: '#F5FCFF',
+ },
+ welcome: {
+ fontSize: 20,
+ textAlign: 'center',
+ margin: 10,
+ },
+});
+
+const ProfileScreen = () => (
+
+
+ Profile Screen
+
+
+);
+
+ProfileScreen.navigationOptions = {
+ title: 'Profile',
+};
diff --git a/packages/react-navigation/examples/ReduxExample/src/navigators/AppNavigator.js b/packages/react-navigation/examples/ReduxExample/src/navigators/AppNavigator.js
new file mode 100644
index 00000000..ffbcedab
--- /dev/null
+++ b/packages/react-navigation/examples/ReduxExample/src/navigators/AppNavigator.js
@@ -0,0 +1,28 @@
+import React, { PropTypes } from 'react';
+import { connect } from 'react-redux';
+import { addNavigationHelpers, StackNavigator } from 'react-navigation';
+
+import LoginScreen from '../components/LoginScreen';
+import MainScreen from '../components/MainScreen';
+import ProfileScreen from '../components/ProfileScreen';
+
+export const AppNavigator = StackNavigator({
+ Login: { screen: LoginScreen },
+ Main: { screen: MainScreen },
+ Profile: { screen: ProfileScreen },
+});
+
+const AppWithNavigationState = ({ dispatch, nav }) => (
+
+);
+
+AppWithNavigationState.propTypes = {
+ dispatch: PropTypes.func.isRequired,
+ nav: PropTypes.object.isRequired,
+};
+
+const mapStateToProps = state => ({
+ nav: state.nav,
+});
+
+export default connect(mapStateToProps)(AppWithNavigationState);
diff --git a/packages/react-navigation/examples/ReduxExample/src/reducers/index.js b/packages/react-navigation/examples/ReduxExample/src/reducers/index.js
new file mode 100644
index 00000000..319278df
--- /dev/null
+++ b/packages/react-navigation/examples/ReduxExample/src/reducers/index.js
@@ -0,0 +1,43 @@
+import { combineReducers } from 'redux';
+import { NavigationActions } from 'react-navigation';
+
+import { AppNavigator } from '../navigators/AppNavigator';
+
+const initialNavState = {
+ index: 1,
+ routes: [
+ { key: 'InitA', routeName: 'Main' },
+ { key: 'InitB', routeName: 'Login' },
+ ],
+};
+
+const initialAuthState = { isLoggedIn: false };
+
+function nav(state = initialNavState, action) {
+ switch (action.type) {
+ case 'Login':
+ return AppNavigator.router.getStateForAction(NavigationActions.back(), state);
+ case 'Logout':
+ return AppNavigator.router.getStateForAction(NavigationActions.navigate({ routeName: 'Login' }), state);
+ default:
+ return AppNavigator.router.getStateForAction(action, state);
+ }
+}
+
+function auth(state = initialAuthState, action) {
+ switch (action.type) {
+ case 'Login':
+ return { ...state, isLoggedIn: true };
+ case 'Logout':
+ return { ...state, isLoggedIn: false };
+ default:
+ return state;
+ }
+}
+
+const AppReducer = combineReducers({
+ nav,
+ auth,
+});
+
+export default AppReducer;