title: Navigating to parent's screen from a nested navigator in react-navigation
body: <p>I'm having trouble navigating back to my homepage from a nested navigator.</p>
  
  <p>My files are structured like this :</p>
  
  <pre><code>const ParentNav = StackNavigator(
      /* Route configs */
      {
          Login: {
              screen: Login
          },
          Signup: {
              screen: Signup
          },
          Authenticated: {
              screen: MainNav
          }
      },
  
      /* Navigator configs */
      {
          initialRouteName: 'Login',
          headerMode : 'none'
      }
  );
  
  export default () =&gt; &lt;ParentNav/&gt;;
  </code></pre>
  
  <p>Login's componentWillMount() :</p>
  
  <pre><code>ls.save('login-key', this.props.navigation.state.key)
  </code></pre>
  
  <p>And then...</p>
  
  <pre><code>const MainNav = TabNavigator(
      // Route configs
      {
          "My App": {
              screen: AppNavigator
          },
          "Action": {
              screen: ActionNavigator
          },
          "Settings": {
              screen: Settings
          },
      },
  
      // Navigator configs
      {
          tabBarPosition: 'bottom'
      }
  );
  
  export default () =&gt; &lt;MainNav /&gt;;
  </code></pre>
  
  <p>My Settings page has a "Logout" button, and I can't figure out how to send the user back to the ParentNav's Login screen from there.</p>
  
  <p>Settings :</p>
  
  <pre><code>componentWillMount() {
      ls.get('login-key')
      .then(key =&gt; {
          console.log('Setting backAction with key ', key)
          backAction = NavigationActions.back({
              key: key
          });
      })
  }
  
  _handleLogout = () =&gt; {
      auth.logout()
      .then(() =&gt; {
          console.log('Dispatch');
          this.props.navigation.dispatch(backAction);
      })
  }
  </code></pre>