Nested navigators

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "editor.formatOnSave": true
+}

App.js

@@ -4,43 +4,24 @@
  * @flow
  */
 
-import React, { Component } from 'react';
-import {
-  Platform,
-  StyleSheet,
-  Text,
-  View
-} from 'react-native';
-import { Provider } from 'react-redux'
-import store from './store'
-import AppNavigation from './src/Navigation'
+import React, { Component } from "react";
+import { Platform, StyleSheet, Text, View } from "react-native";
+import { Provider } from "react-redux";
+import { PersistGate } from "redux-persist/es/integration/react";
+// import store from './store'
+import AppNavigation from "./src/Navigation";
+import configureStore from "./store";
 
+const { store, persistor } = configureStore();
 
 export default class App extends Component {
   render() {
     return (
       <Provider store={store}>
-        <AppNavigation />
+        <PersistGate loading={<Text>Loading...</Text>} persistor={persistor}>
+          <AppNavigation />
+        </PersistGate>
       </Provider>
     );
   }
 }
-
-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,
-  },
-});

index.js

@@ -1,4 +1,4 @@
-import { AppRegistry } from 'react-native';
-import App from './App';
+import { AppRegistry } from "react-native";
+import App from "./App";
 
-AppRegistry.registerComponent('reactNavigationDemo', () => App);
+AppRegistry.registerComponent("reactNavigationDemo", () => App);

package.json

@@ -9,9 +9,10 @@
   "dependencies": {
     "react": "16.0.0-beta.5",
     "react-native": "0.49.3",
-    "react-navigation": "^1.0.0-beta.15",
+    "react-navigation": "1.0.0-beta.15",
     "react-redux": "^5.0.6",
-    "redux": "^3.7.2"
+    "redux": "^3.7.2",
+    "redux-persist": "^5.2.2"
   },
   "devDependencies": {
     "babel-jest": "21.2.0",

readme.md

@@ -0,0 +1,7 @@
+# React-Navigation + Redux
+
+ * Accompanying blog : https://medium.com/@shubhnik/a-comprehensive-guide-for-integrating-react-navigation-with-redux-including-authentication-flow-cb7b90611adf
+
+ * Final result with authentication flow(authFlow branch of this repo)
+
+![demo](./authFlow.gif)

src/Actions/actionCreator.js

@@ -1,14 +1,47 @@
-import {incrementCounter, decrementCounter} from './actionTypes'
+import {
+  incrementCounter,
+  decrementCounter,
+  Login,
+  Logout,
+  Register,
+  RegisterSuccess,
+  NavigateToLogoutScreen
+} from "./actionTypes";
 
 const incrementAction = () => ({
-    type: incrementCounter
-})
+  type: incrementCounter
+});
 
 const decrementAction = () => ({
-    type: decrementCounter
-})
+  type: decrementCounter
+});
+
+const login = () => ({
+  type: Login
+});
+
+const logout = () => ({
+  type: Logout
+});
+
+const register = () => ({
+  type: Register
+});
+
+const registerSuccess = () => ({
+  type: RegisterSuccess
+});
+
+const navigateToLogoutScreen = () => ({
+  type: NavigateToLogoutScreen
+});
 
 export {
-    incrementAction,
-    decrementAction
-}
+  incrementAction,
+  decrementAction,
+  login,
+  logout,
+  register,
+  registerSuccess,
+  navigateToLogoutScreen
+};

src/Actions/actionTypes.js

@@ -1,7 +1,17 @@
 const incrementCounter = "INCREMENT_COUNTER";
 const decrementCounter = "DECREMENT_COUNTER";
+const Login = "LOGIN";
+const Logout = "LOGOUT";
+const Register = "REGISTER";
+const RegisterSuccess = "REGISTER_SUCCESS";
+const NavigateToLogoutScreen = "NAVIGATE_TO_LOGOUT_SCREEN";
 
 export {
-    incrementCounter,
-    decrementCounter
-}
+  incrementCounter,
+  decrementCounter,
+  Login,
+  Logout,
+  Register,
+  RegisterSuccess,
+  NavigateToLogoutScreen
+};

src/Components/Counter.js

@@ -0,0 +1,87 @@
+import React, { Component } from "react";
+import { Text, View, TouchableOpacity } from "react-native";
+import { NavigationActions } from "react-navigation";
+import { connect } from "react-redux";
+import {
+  incrementAction,
+  decrementAction,
+  navigateToLogoutScreen
+} from "../Actions/actionCreator";
+import { Tabs } from "../Navigation/navigationStack";
+
+class CounterView extends Component {
+  navigate = () => {
+    this.props.navigateToLogoutScreen();
+  };
+
+  render() {
+    const {
+      counterCount,
+      incrementAction,
+      decrementAction,
+      counterString
+    } = this.props;
+    return (
+      <View
+        style={{
+          flex: 1,
+          backgroundColor: "yellowgreen",
+          justifyContent: "center",
+          alignItems: "center"
+        }}
+      >
+        <Text>{counterCount}</Text>
+        <Text>{counterString}</Text>
+        <View style={{ height: 100, flexDirection: "row" }}>
+          <TouchableOpacity
+            onPress={() => incrementAction()}
+            style={{ flex: 1, justifyContent: "center", alignItems: "center" }}
+          >
+            <Text
+              style={{ textDecorationLine: "underline", fontWeight: "600" }}
+            >
+              INCREMENT
+            </Text>
+          </TouchableOpacity>
+          <TouchableOpacity
+            onPress={() => decrementAction()}
+            style={{ flex: 1, justifyContent: "center", alignItems: "center" }}
+          >
+            <Text
+              style={{ textDecorationLine: "underline", fontWeight: "600" }}
+            >
+              DECREMENT
+            </Text>
+          </TouchableOpacity>
+        </View>
+        <TouchableOpacity
+          style={{
+            paddingVertical: 15,
+            paddingHorizontal: 40,
+            backgroundColor: "indigo"
+          }}
+          onPress={this.navigate}
+        >
+          <Text style={{ fontSize: 17, fontWeight: "400", color: "white" }}>
+            Navigate to the last tab programmatically: "Logout"
+          </Text>
+        </TouchableOpacity>
+      </View>
+    );
+  }
+}
+
+const mapStateToProps = state => ({
+  counterCount: state.CounterReducer.counter,
+  counterString: state.CounterReducer.counterString
+});
+
+const mapDispatchToProps = {
+  incrementAction,
+  decrementAction,
+  navigateToLogoutScreen
+};
+
+const Counter = connect(mapStateToProps, mapDispatchToProps)(CounterView);
+
+export default Counter;

src/Components/Feed.js

@@ -0,0 +1,8 @@
+import React, { Component } from "react";
+import { Text, View, TouchableOpacity } from "react-native";
+
+export default class Feed extends Component {
+  render() {
+    return <View style={{ flex: 1, backgroundColor: "blue" }} />;
+  }
+}

src/Components/LoginScreen.js

@@ -0,0 +1,76 @@
+import React, { Component } from "react";
+import { connect } from "react-redux";
+import { NavigationActions } from "react-navigation";
+import { Text, View, TouchableOpacity, StyleSheet } from "react-native";
+import { login, register } from "../Actions/actionCreator";
+
+class LoginScreen extends Component {
+  static navigationOptions = {
+    title: "Login"
+  };
+
+  navigateToRegisterScreen = () => {
+    this.props.register();
+  };
+
+  render() {
+    return (
+      <View style={styles.rootContainer}>
+        <Text style={styles.textStyles}>
+          This is a dummy Login Screen, no TextInputs, only Dummy Login button.
+        </Text>
+        <Text style={[styles.textStyles, { marginTop: 10 }]}>
+          This is a completely synchronous flow, just for demo.
+        </Text>
+        <Text style={[styles.textStyles, { marginTop: 10 }]}>
+          In real life situation, you might be doing async task like calling a
+          remote server to authenticate.You might need redux-thunk to dispatch
+          action asynchronously.
+        </Text>
+        <TouchableOpacity
+          onPress={this.props.login}
+          style={styles.touchableStyles}
+        >
+          <Text style={{ color: "white", fontSize: 22 }}>Login</Text>
+        </TouchableOpacity>
+        <Text
+          onPress={this.navigateToRegisterScreen}
+          textDecorationLine="underline"
+          style={{ fontSize: 18, fontWeight: "500", marginTop: 10 }}
+        >
+          Register
+        </Text>
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  rootContainer: {
+    flex: 1,
+    backgroundColor: "cyan",
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  textStyles: {
+    textAlign: "center",
+    color: "rgba(0,0,0,0.8)",
+    fontSize: 16
+  },
+  touchableStyles: {
+    marginTop: 15,
+    backgroundColor: "black",
+    paddingHorizontal: 50,
+    paddingVertical: 10,
+    borderRadius: 5
+  }
+});
+
+const mapDispatchToProps = {
+  login,
+  register
+};
+
+const Login = connect(null, mapDispatchToProps)(LoginScreen);
+
+export default Login;

src/Components/Logout.js

@@ -0,0 +1,45 @@
+import React, { Component } from "react";
+import { Text, View, TouchableOpacity, StyleSheet } from "react-native";
+import { connect } from "react-redux";
+import { logout } from "../Actions/actionCreator";
+
+class LogoutScreen extends Component {
+  render() {
+    return (
+      <View
+        style={{
+          flex: 1,
+          backgroundColor: "powderblue",
+          justifyContent: "center",
+          alignItems: "center"
+        }}
+      >
+        {/* <Text>{this.props.navigation.state.params.name}</Text> */}
+        <TouchableOpacity
+          onPress={this.props.logout}
+          style={styles.touchableStyles}
+        >
+          <Text style={{ color: "white", fontSize: 22 }}>Logout</Text>
+        </TouchableOpacity>
+      </View>
+    );
+  }
+}
+
+const mapDispatchToProps = {
+  logout
+};
+
+const Logout = connect(null, mapDispatchToProps)(LogoutScreen);
+
+export default Logout;
+
+const styles = StyleSheet.create({
+  touchableStyles: {
+    marginTop: 15,
+    backgroundColor: "black",
+    paddingHorizontal: 50,
+    paddingVertical: 10,
+    borderRadius: 5
+  }
+});

src/Components/Notification.js

@@ -0,0 +1,8 @@
+import React, { Component } from "react";
+import { Text, View, TouchableOpacity } from "react-native";
+
+export default class Notification extends Component {
+  render() {
+    return <View style={{ flex: 1, backgroundColor: "green" }} />;
+  }
+}