title: Navigate to root screen from nested stack navigator
body: <p>i am new to react and trying to learn it by myself , i am facing problem in navigating user back to root screen from nested stck navigator screen .</p>
  
  <p>Here is some of my classes :-</p>
  
  <p><strong>index.android.js</strong> :-</p>
  
  <pre><code>import React, { Component } from 'react';
  import {
    AppRegistry,
    StyleSheet,
    Text,
    StatusBar,
    View
  } from 'react-native';
  import {LoginStack} from './login/loginregisterrouter';
  import {StackNavigator } from 'react-navigation';
  class reactNavigationSample extends Component {
    render(){
      return (
     &lt;LoginStack/&gt;
      );
    }
  }
  AppRegistry.registerComponent('MssReactDemo', () =&gt; reactNavigationSample);
  </code></pre>
  
  <p><strong>loginregisterrouter</strong> :-</p>
  
  <pre><code>import React from 'react';
  import {StackNavigator } from 'react-navigation';
  import LoginScreen from './LoginScreen';
  import RegisterScreen from './RegisterScreen';
  import NavigationContainer from './navigationContainer';
  export const LoginStack = StackNavigator({
    LoginScreen: {
      screen: LoginScreen,
      navigationOptions: {
        title: 'LoginScreen',
      }
    },
    RegisterScreen: {
      screen: RegisterScreen,
      navigationOptions: ({ navigation }) =&gt; ({
        title: 'RegisterScreen',
      }),
    },NavigationContainer: {
          screen: NavigationContainer,
          navigationOptions: ({ navigation }) =&gt; ({
            title: 'NavigationContainer', header: null,
          }),
        },
  });
  </code></pre>
  
  <p><strong>Navigationcontainer.js</strong> :-</p>
  
  <pre><code>import React, { Component } from 'react';
  import {
    AppRegistry,
    StyleSheet,
    Text,
    StatusBar,
    View
  } from 'react-native';
  import {EasyRNRoute,} from '../parent';
  import {StackNavigator } from 'react-navigation';
  export default class NavigationContainer extends Component {
    render(){
      return (
     &lt;EasyRNRoute/&gt;
      );
    }
  }
  </code></pre>
  
  <p><strong>parent.js</strong> :-</p>
  
  <pre><code>import React, { Component } from 'react';
  import {
    StyleSheet,
    Text,
    StatusBar,
    View
  } from 'react-native';
  import App from './app';
  import DrawerMenu from './Drawer/drawer-toolbar-android';
  import BookmarkView from './Pages/bookmark';
  import ClientView from './Pages/client';
  import InfoView from './Pages/info';
  import SettingsView from './Pages/setting';
  import { DrawerNavigator, StackNavigator } from 'react-navigation';
  
  export const stackNavigator = StackNavigator({
    Info: { screen: InfoView },
    Settings: {screen: SettingsView },
    Bookmark: {screen: BookmarkView },
    Connections: {screen: ClientView},
  }, {
    headerMode: 'none'
  });
  
  export const EasyRNRoute = DrawerNavigator({
    Home: {
      screen: App,
    },
    Stack: {
      screen: stackNavigator
    }
  }, {
    contentComponent: DrawerMenu,
    contentOptions: {
      activeTintColor: '#e91e63',
      style: {
        flex: 1,
        paddingTop: 15,
      }
    }
  });
  </code></pre>
  
  <p><strong>Drawer-toolbar-android.js</strong> :-</p>
  
  <pre><code>import React, { Component } from 'react';
  import {
      AppRegistry,
      StyleSheet,
      Text,
      StatusBar,
      View
  } from 'react-native';
  import { NavigationActions } from 'react-navigation'
  import { COLOR, ThemeProvider, Toolbar, Drawer, Avatar } from 'react-native-material-ui';
  import Container from '../Container';
  import LoginScreen from '../login/LoginScreen';
  
  const uiTheme = {
      palette: {
          primaryColor: COLOR.green500,
          accentColor: COLOR.pink500,
        },
      toolbar: {
          container: {
              height: 70,
              paddingTop: 20,
            },
        },
        avatar: {
            container: {
                backgroundColor: '#333'
            }
        }
    };
  
  export default class DrawerMenu extends Component {
    constructor(props, context) {
      super(props, context);
      this.state = {
          active: 'people',
        };
    }
  handleLogoutPress = () =&gt; {
  //    AsyncStorage.setItem('SignedUpuser', '');
  this.props
                 .navigation
                 .dispatch(NavigationActions.reset(
                   {
                      index: 0,
                      actions: [
                        NavigationActions.navigate({ routeName: 'LoginScreen'})
                      ]
                    }));
  //     this.props.navigation.dispatch(NavigationActions.back());
    };
    _setInfoActive() {
      this.setState({ active: 'info' });
    }
  
    render() {
      return (
          &lt;ThemeProvider uiTheme={uiTheme}&gt;
                  &lt;Container&gt;
                      &lt;StatusBar backgroundColor="rgba(0, 0, 0, 0.2)" translucent /&gt;
                      &lt;Toolbar
                      leftElement="arrow-back"
                      onLeftElementPress={() =&gt; this.props.navigation.navigate('DrawerClose')}
                      centerElement="Menu"
                  /&gt;
                      &lt;View style={styles.container}&gt;
                          &lt;Drawer&gt;
                              &lt;Drawer.Header &gt;
                                  &lt;Drawer.Header.Account
                                  style={{ 
                                      container: { backgroundColor: '#fafafa' },
                                  }}
                                  avatar={&lt;Avatar text={'S'} /&gt;}
  //                                accounts={[
  //                                    { avatar: &lt;Avatar text="H" /&gt; },
  //                                    { avatar: &lt;Avatar text="L" /&gt; },
  //                                ]}
                                  footer={{
                                      dense: true,
                                      centerElement: {
                                          primaryText: 'Siddharth',
                                          secondaryText: 'I am DONE now',
                                      },
  
                                    }}
                              /&gt;
                              &lt;/Drawer.Header&gt;
                              &lt;Drawer.Section
                              style={{
                                  label: {color: '#0000ff'}
                              }}
                              divider
                              items={[
                                  {
                                      icon: 'bookmark-border', value: 'Bookmarks',
                                      active: this.state.active == 'bookmark',
                                      onPress: () =&gt; {
                                          this.setState({ active: 'bookmark' });
                                          this.props.navigation.navigate('Bookmark');
                                        },
                                    },
                                  {
                                      icon: 'people', value: 'Connections',
                                      active: this.state.active == 'Connection',
                                      onPress: () =&gt; {
                                          this.setState({ active: 'Connection' });
                                          this.props.navigation.navigate('Connections');
                                        },
                                    },
                              ]}
                          /&gt;
                              &lt;Drawer.Section
                              title="Personal"
                              items={[
                                  {
                                      icon: 'info', value: 'Info',
                                      active: this.state.active == 'info',
                                      onPress: () =&gt; {
                                          this.setState({ active: 'info' });
                                          //this.props.navigation.navigate('DrawerClose');
                                          this.props.navigation.navigate('Info');
                                        },
                                    },
                                  {
                                      icon: 'settings', value: 'Settings',
                                      active: this.state.active == 'settings',
                                      onPress: () =&gt; {
                                          this.setState({ active: 'settings' });
                                          this.props.navigation.navigate('Settings');
                                        },
                                    },
                                     {
                                      icon: 'logout', value: 'Logout',
                                      active: this.state.active == 'logout',
                                      onPress: () =&gt; {
                                      this.handleLogoutPress();
                                       },
                                        },
                              ]}
                          /&gt;
                          &lt;/Drawer&gt;
                      &lt;/View&gt;
                  &lt;/Container&gt;
              &lt;/ThemeProvider&gt;
      );
    }
  }
  
  const styles = StyleSheet.create({
      container: {
          flex: 1,
          backgroundColor: '#F5FCFF',
        },
      header: {
          backgroundColor: '#455A64',
        },
      welcome: {
          fontSize: 20,
          textAlign: 'center',
          margin: 10,
        },
      instructions: {
          textAlign: 'center',
          color: '#333333',
          marginBottom: 5,
        },
    });
  </code></pre>
  
  <p>The above is the stack architecture i am using inside my application and as you can see that my Main screen is LOGIN screen and i do have option for LOGOUT from application in my Drawer(side menu). What i eaxtly want is that when user click on logout he/she should get redirected to LOGIN screen . i have googled about this and got to know about two ways of doing it , but both the ways are not working for me , may be i am using them in wrong way. so i am here to seek your help . </p>
  
  <p><strong>The two methods are</strong> :-</p>
  
  <p><strong>1)</strong> </p>
  
  <pre><code>this.props
                 .navigation
                 .dispatch(NavigationActions.reset(
                   {
                      index: 0,
                      actions: [
                        NavigationActions.navigate({ routeName: 'LoginScreen'})
                      ]
                    }));
  </code></pre>
  
  <p><strong>2)</strong> <code>this.props.navigation.dispatch(NavigationActions.back());</code></p>
  
  <p>this question may seems silly to you but i am really stuck at this point and just want to know how can i  figure this out.Any help would be greatly Appreciated!!!!
  Thanks in advance.</p>