title: How do I add Redux implementation in my code?
body: <p>I want to add redux implementation to my simple Login application with some react navigations.</p>
  
  <p>This is my App.js file where I'm importing my AppDrawerNavigator</p>
  
  <pre><code>   import React, {Component} from 'react';
  import {createAppContainer, createStackNavigator} from 'react-navigation';
  import HomeScreen from './screens/HomeScreen.js';
  
  /** Importing navigator */
  import AppDrawerNavigator from './drawerNavigator';
  
  
  class App extends React.Component {
      render() {
        return &lt;AppContainer /&gt;;
      }
  }
  
  export default App;
  
  
  
  const AppStackNavigator = createStackNavigator(
    {
      Home: {screen: HomeScreen},
      Welcome: AppDrawerNavigator
    },
    {
      initialRouteName: 'Home',
      headerMode: "none",
    }
  );
  
  const AppContainer = createAppContainer(AppStackNavigator);
  </code></pre>
  
  <p>This is my index.js file pointing to my main App.js file</p>
  
  <pre><code>import {AppRegistry} from 'react-native';
  import App from './App';
  
  
  import {name as appName} from './app.json';
  
  AppRegistry.registerComponent(appName, () =&gt; App);
  </code></pre>
  
  <p>Below shows my different screen files.
   <strong>HomeScreen.js</strong></p>
  
  <pre><code>    import React, {Component} from 'react';
  import {
    Platform, 
    StyleSheet, 
    Text, 
    View, 
    TouchableOpacity, 
    Alert, 
    Keyboard, 
    TextInput,
  } from 'react-native';
  //HomeScreen
  export default class HomeScreen extends React.Component {
    constructor(props) {
    super(props);
    this.state = {username: null, password: null, isPasswordHidden: true, toggleText: 'Show'};
  }
  
  handleToggle = () =&gt; {
    const { isPasswordHidden } = this.state;
  
    if (isPasswordHidden) {
      this.setState({isPasswordHidden: false});
      this.setState({toggleText: 'Hide'});
    } else {
      this.setState({isPasswordHidden: true});
      this.setState({toggleText: 'Show'});
    }
  }
  
  //Validate() to check whether the input username is in Mail format
  validate = (inputValue) =&gt; {
    let reg = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/ ; // Regex for Emails
    // let reg = /^(\+\d{1,3}[- ]?)?\d{10}$/; // Regex for phone numbers
    return reg.test(inputValue);
  }
  clearText(fieldName) {
    this.refs[fieldName].clear(0);
  }
  
  render() {
    return (
      &lt;View style={styles.container}&gt;
        &lt;Text style={styles.welcome}&gt;&lt;/Text&gt;
  
  
        &lt;TextInput
          ref={'input1'}
          style={styles.input}
          placeholder="Username"
          onChangeText={value =&gt; this.setState({username: value})}
          // placeholderTextColor="Grey"
          // maxLength={13} // For Indian phone numbers
          // onChangeText={(text) =&gt; this.validate(text)}
          // value={this.state.username}
        /&gt;
  
        &lt;TextInput
          ref={'input2'}
          style={styles.input}
          placeholder="Password"
          maxLength={10}
          secureTextEntry={this.state.isPasswordHidden}
          onChangeText={value =&gt; this.setState({password: value})}
          // placeholderTextColor="rgb(225,225,225)"
        /&gt;
  
        &lt;TouchableOpacity
          onPress={this.handleToggle}
        &gt;
          &lt;Text&gt;{this.state.toggleText}&lt;/Text&gt;
  
        &lt;/TouchableOpacity&gt;
  
        &lt;View style={{padding: 20}}&gt;
          &lt;TouchableOpacity onPress={() =&gt; {
  
            if (!this.validate(this.state.username)) {
              Alert.alert("Invalid");
              Keyboard.dismiss();
            } else if (this.state.username === 'vinay@gmail.com' &amp;&amp; this.state.password === 'password') {
              //Alert.alert("Login Successful");
              if(this.state.username &amp;&amp; this.state.password){
                this.props.navigation.navigate('Welcome', {
                  username: this.state.username,
                  password: this.state.password,
                });
                this.setState({username: ""});
                this.setState({password: ""});
              }else{
                alert("Invalid");
              }
  
              Keyboard.dismiss();
              this.clearText('input1');
              this.clearText('input2');
            } else if (this.state.username === null &amp;&amp; this.state.password === null) {
              Alert.alert("Invalid");
            } else {
              Alert.alert("Login Failed");
              this.clearText('input1');
              this.clearText('input2');
              Keyboard.dismiss();
            }
  
          }}&gt;
            &lt;View style={styles.button}&gt;
              &lt;Text style={styles.buttonText}&gt;LOGIN&lt;/Text&gt;
            &lt;/View&gt;
          &lt;/TouchableOpacity&gt;
        &lt;/View&gt;
  
      &lt;/View&gt;
    );
  }
  }
  
  /** Stylesheets Defined **/
  const styles = StyleSheet.create({
    container: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
      // backgroundColor: '#F5FCFF',
    },
    welcome: {
      fontSize: 40,
      margin: 10,
      padding: 20
      // textAlign: 'center',
    },
    input:{
      // height: 40,
      // margin: 10,
      width: 260,
      backgroundColor: 'lightgrey',
      marginBottom: 10,
      padding: 10,
      color: 'black'
    },
    button: {
      marginBottom: 30,
      width: 260,
      alignItems: 'center',
      backgroundColor: '#2196F3',
      fontWeight: 'bold'
  
    },
    buttonText: {
      padding: 20,
      color: 'white'
    }
  });
  </code></pre>
  
  <p>This is the screen <strong>ProfileScreen.js</strong></p>
  
  <pre><code> import React, {Component} from 'react';
  import {
    Platform, 
    StyleSheet, 
    Text, 
    Image,
    View, 
  } from 'react-native';
  
  export default class Profile extends Component {
      render() {
        return(
          &lt;View&gt;
            &lt;Image 
            style={styles.image}
            source={{uri: 'https://facebook.github.io/react/logo-og.png'}}
            /&gt;
          &lt;/View&gt;
        );
      }
  }
  
  /** Stylesheets Defined **/
  const styles = StyleSheet.create({
      container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        // backgroundColor: '#F5FCFF',
      },
      welcome: {
        fontSize: 40,
        margin: 10,
        padding: 20
        // textAlign: 'center',
      },
      input:{
        // height: 40,
        // margin: 10,
        width: 260,
        backgroundColor: 'lightgrey',
        marginBottom: 10,
        padding: 10,
        color: 'black'
      },
      button: {
        marginBottom: 30,
        width: 260,
        alignItems: 'center',
        backgroundColor: '#2196F3',
        fontWeight: 'bold'
  
      },
      buttonText: {
        padding: 20,
        color: 'white'
      },
      image: {
        width: 200,
        height: 200,
        margin: 10
      }
  });
  </code></pre>
  
  <p>This is the screen <strong>SettingsScreen.js</strong></p>
  
  <pre><code>    import React, {Component} from 'react';
  import {
    Platform, 
    StyleSheet, 
    Text, 
    View, 
  } from 'react-native';
  
  export default class Settings extends Component {
      render() {
        return(
          &lt;View style={styles.container}&gt;
            &lt;Text&gt;Settings&lt;/Text&gt;
          &lt;/View&gt;
        );
      }
  }
  
  /** Stylesheets Defined **/
  const styles = StyleSheet.create({
      container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        // backgroundColor: '#F5FCFF',
      },
      welcome: {
        fontSize: 40,
        margin: 10,
        padding: 20
        // textAlign: 'center',
      },
      input:{
        // height: 40,
        // margin: 10,
        width: 260,
        backgroundColor: 'lightgrey',
        marginBottom: 10,
        padding: 10,
        color: 'black'
      },
      button: {
        marginBottom: 30,
        width: 260,
        alignItems: 'center',
        backgroundColor: '#2196F3',
        fontWeight: 'bold'
  
      },
      buttonText: {
        padding: 20,
        color: 'white'
      }
  });
  </code></pre>
  
  <p>This is the screen <strong>TabA.js</strong></p>
  
  <pre><code>    import React, { Component } from 'react'
  import {
    View,
    Text,
    StyleSheet,
  } from 'react-native'
  
  export default class TabA extends React.Component {
  
    // static navigationOptions = ({ navigation }) =&gt; ({
    //   title: 'Tab A',
    // })
  
    render () {
      return (
        &lt;View style={styles.container}&gt;
          &lt;Text style={styles.text}&gt;I'm Tab A&lt;/Text&gt;
        &lt;/View&gt;
        )
    }
  }
  
  const styles = StyleSheet.create({
    container: {
      flex: 1,
      alignItems: 'center',
      justifyContent: 'center',
      backgroundColor: '#c0392b',
      padding: 20,
    },
    text: {
      color: 'white',
      fontSize: 40,
      fontWeight: 'bold',
    }
  })
  </code></pre>
  
  <p>This is the screen <strong>TabB.js</strong></p>
  
  <pre><code>    import React, { Component } from 'react'
  import {
    View,
    Text,
    StyleSheet,
  } from 'react-native'
  
  export default class TabB extends React.Component {
  
    // static navigationOptions = ({ navigation }) =&gt; ({
    //   title: 'Tab B',
    // })
  
    render () {
      return (
        &lt;View style={styles.container}&gt;
          &lt;Text style={styles.text}&gt;I'm Tab B&lt;/Text&gt;
        &lt;/View&gt;
        )
    }
  }
  
  const styles = StyleSheet.create({
    container: {
      flex: 1,
      alignItems: 'center',
      justifyContent: 'center',
      backgroundColor: '#8e44ad',
      padding: 20,
    },
    text: {
      color: 'white',
      fontSize: 40,
      fontWeight: 'bold',
    }
  })
  </code></pre>
  
  <p>This is the screen <strong>WelcomeScreen.js</strong></p>
  
  <pre><code>    import React, {Component} from 'react';
  import {
    Platform, 
    StyleSheet, 
    Text, 
    View, 
  } from 'react-native';
  
  export default class WelcomeScreen extends Component {
  
    render() {
      const { navigation } = this.props;
      const u_name = navigation.getParam('username', 'name');
      const p_word = navigation.getParam('password', 'word');
      return (
        &lt;View style={styles.container}&gt;
          &lt;Text style={styles.welcome}&gt;WELCOME&lt;/Text&gt;
          &lt;Text&gt;USERNAME: {JSON.stringify(u_name)}&lt;/Text&gt;
          &lt;Text&gt;PASSWORD: {JSON.stringify(p_word)}&lt;/Text&gt;
  
          {/* &lt;View style={{padding: 20}}&gt;
            &lt;Button style={{margin: 20}}
              title="LOGOUT"
              onPress={() =&gt; this.props.navigation.navigate('Home')}
            /&gt;
          &lt;/View&gt; */}
        &lt;/View&gt;
      );
    }
  }
  
  /** Stylesheets Defined **/
  const styles = StyleSheet.create({
    container: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
      // backgroundColor: '#F5FCFF',
    },
    welcome: {
      fontSize: 40,
      margin: 10,
      padding: 20
      // textAlign: 'center',
    },
    input:{
      // height: 40,
      // margin: 10,
      width: 260,
      backgroundColor: 'lightgrey',
      marginBottom: 10,
      padding: 10,
      color: 'black'
    },
    button: {
      marginBottom: 30,
      width: 260,
      alignItems: 'center',
      backgroundColor: '#2196F3',
      fontWeight: 'bold'
  
    },
    buttonText: {
      padding: 20,
      color: 'white'
    }
  });
  </code></pre>
  
  <p>Below shows my different navigator files
   This is the drawer navigator file <strong>drawerNavigator.js</strong></p>
  
  <pre><code>    import React, {Component} from 'react';
  import {
      View, 
      Button, 
      SafeAreaView,
  } from 'react-native';
  
  import {
      createDrawerNavigator,
      DrawerItems,
  } from 'react-navigation';
  
  import TabA from './screens/TabA.js';
  import TabB from './screens/TabB.js';
  import WelcomeStackNavigator from './stackNavigator';
  
  class Hidden extends React.Component {
      render() {
        return null;
      }
  }
  
  const AppDrawerNavigator = createDrawerNavigator({
      Welcome: { 
          screen: WelcomeStackNavigator,
          navigationOptions: {
              drawerLabel: &lt;Hidden /&gt;
          } 
      },
      TabA: { screen: TabA },
      TabB: { screen: TabB },
      // TabC: { screen: TabC },
  },{
      contentComponent:(props) =&gt; (
        &lt;View style={{flex:1}}&gt;
            &lt;SafeAreaView forceInset={{ top: 'always', horizontal: 'never' }}&gt;
                &lt;DrawerItems {...props} /&gt;
                &lt;Button 
                  title="Logout" 
                  onPress={() =&gt; {
                      props.navigation.navigate('Home')
                  }}
                /&gt;
            &lt;/SafeAreaView&gt;
        &lt;/View&gt;
      ),
      drawerOpenRoute: 'DrawerOpen',
      drawerCloseRoute: 'DrawerClose',
      drawerToggleRoute: 'DrawerToggle'
  })
  
  export default AppDrawerNavigator;
  </code></pre>
  
  <p>This is the stack navigator file <strong>stackNavigator.js</strong></p>
  
  <pre><code>import React, {Component} from 'react';
  import Icon from 'react-native-vector-icons/Ionicons';
  
  import {
    createStackNavigator,
  } from 'react-navigation';
  
  import WelcomeTabNavigator from './tabNavigator';
  
  const WelcomeStackNavigator = createStackNavigator({
      WelcomeTabNavigator: WelcomeTabNavigator
    },
    {
      defaultNavigationOptions:({navigation}) =&gt; {
        return {
          headerLeft: (
            &lt;Icon 
              style={{paddingLeft: 20}}
              onPress={() =&gt; navigation.openDrawer()}
              name="md-menu" 
              size={30}
            /&gt;
          )
        };
      }
    }
  );
  
  export default WelcomeStackNavigator;
  </code></pre>
  
  <p>This is the tab navigator file <strong>tabNavigator.js</strong></p>
  
  <pre><code>import React, {Component} from 'react';
  import WelcomeScreen from './screens/WelcomeScreen.js';
  import Profile from './screens/ProfileScreen.js';
  import Settings from './screens/SettingsScreen.js';
  
  import Icon from 'react-native-vector-icons/Ionicons';
  
  import {
    createBottomTabNavigator,
  } from 'react-navigation';
  
  const WelcomeTabNavigator = createBottomTabNavigator(
      {
          Welcome: { 
              screen: WelcomeScreen,
              navigationOptions: {
  
                  tabBarIcon: ({tintColor}) =&gt; (
                      &lt;Icon
                          name="md-home"
                          size={20}
                      /&gt;
                  )
              }
          },
          Profile: {
              screen: Profile,
              navigationOptions: {
  
                  tabBarIcon: ({tintColor}) =&gt; (
                      &lt;Icon
                          name="md-book"
                          size={20}
                      /&gt;
                  )
              }
          },
          Settings: {
              screen: Settings,
              navigationOptions: {
  
                  tabBarIcon: ({tintColor}) =&gt; (
                      &lt;Icon
                          name="md-settings"
                          size={20}
                      /&gt;
                  )
              }
          },
      }, 
      {
          tabBarOptions: {
              activeTintColor: '#fb9800',
              inactiveTintColor: '#7e7b7b',
              style: { height: 40,backgroundColor: '#fff',borderTopWidth:0.5,borderTopColor: '#7e7b7b' },
              labelStyle: {fontSize: 15}
          },
          // navigationOptions:({navigation}) =&gt; {
          //     const {routeName} = navigation.state.routes[navigation.state.index];
          //     return {
          //         headerTitle: routeName
          //     };
          // },
          navigationOptions:({navigation}) =&gt; {
              const {routeName} = navigation.state.routes[navigation.state.index];
              return {
                  headerTitle: routeName,
                  // headerLeft: (
                  //     &lt;Icon 
                  //     style={{paddingLeft: 20}}
                  //     onPress={() =&gt; navigation.openDrawer()}
                  //     name="md-menu" 
                  //     size={30}
                  //     /&gt;
                  // )
              };
          }
      }
  )
  
  export default WelcomeTabNavigator;
  </code></pre>
  
  <p>How do I structure my project and add redux implementation on this login application? </p>