title: React Navigation - pop() go's back to root rather than previous page
body: <p>I am trying to add a back buttons into a bespoke sidemenu component.</p>
  
  <p>Here is my navigation.js setup:</p>
  
  <pre><code>import { createAppContainer, createStackNavigator, createDrawerNavigator } from 'react-navigation';
  import App from '../components/App';
  import HomeView from '../components/HomeView';
  import CheckIn from '../components/CheckIn';
  import LoginView from '../components/LoginView';
  import LrmDocs from '../components/LrmDocs';
  import Rota from '../components/Rota';
  import SideMenu from '../components/util/SideMenu';
  
  
  
  const InitStack = createStackNavigator({
    AppContainer: App,
    LoginViewContainer:LoginView,
  });
  
  
  const RootStack = createDrawerNavigator({
    Auth:InitStack,
  
    HomeViewContainer: HomeView,
    RotaContainer: Rota,
    CheckInContainer:CheckIn,
    LrmDocsContainer: LrmDocs,
  },
  {
    drawerPosition: 'right',
    contentComponent: SideMenu,
    cardStyle: { backgroundColor: '#FFFFFF'},
    drawerLockMode: 'locked-closed'
  
  }
  );
  
  
  let Navigation = createAppContainer(RootStack);
  
  export default Navigation;
  </code></pre>
  
  <p><strong>I have the following setup in my bespoke sidemenu -</strong> </p>
  
  <pre><code>mport React, {Component} from 'react';
  import CopyrightSpiel from './CopyrightSpiel';
  import {ScrollView, Text, View, StyleSheet, Image, Button, TouchableOpacity} from 'react-native';
  import { withNavigation } from 'react-navigation';
  import { connect } from "react-redux";
  
  import { authLogout, clearUser } from "../../store/actions/index";
  
  class SideMenu extends Component {
    constructor(props) {
      super(props);
      this.state = { loggedIn:false};
    }
  
    logOutHandler = () =&gt; {
  
      this.props.onTryLogout();
      this.props.clearUser();
      this.props.navigation.navigate('AppContainer');
    };
  
    render() {
      const isLoggedIn = () =&gt; {
        if(this.state.loggedIn){
  
          return true;
        }
        else {return false; }
      };
      let cp = this.props.activeItemKey;
  
      let getCurrentCoordinates = (pg) =&gt; {
        if(cp === pg){
          return true;
        }
      };
  
      return (
        &lt;View style={styles.container}&gt;
  
          &lt;ScrollView&gt;
            &lt;View style={styles.header}&gt;
              &lt;View style={styles.closeBtnWrap}&gt;
                &lt;TouchableOpacity
                  onPress={() =&gt; this.props.navigation.toggleDrawer() }
                &gt;
                  &lt;Image
                    style={styles.closeBtnImg}
                    source={require('../../images/icons/ico-close.png')}
                  /&gt;
  
                &lt;/TouchableOpacity&gt;
              &lt;/View&gt;
  
  
              &lt;View style={styles.logoBlock}&gt;
                &lt;Image style={styles.homeBlockImg} source={require('../../images/loginLogo.png')} /&gt;
              &lt;/View&gt;
  
            &lt;/View&gt;
            &lt;View style={styles.navSection}&gt;
  
              &lt;TouchableOpacity
                onPress={() =&gt; this.props.navigation.navigate('HomeViewContainer')}
              &gt;
                &lt;View style={[styles.navSectionStyle, getCurrentCoordinates('HomeViewContainer') &amp;&amp; styles.navItemSel]}&gt;
                  &lt;Text style={styles.navItemStyle}&gt;
                  HOME
                  &lt;/Text&gt;
                &lt;/View&gt;
              &lt;/TouchableOpacity&gt;
  
              &lt;TouchableOpacity
                onPress={() =&gt; this.props.navigation.navigate('RotaContainer')}
              &gt;
                &lt;View style={[styles.navSectionStyle, getCurrentCoordinates('RotaContainer') &amp;&amp; styles.navItemSel]}&gt;
                  &lt;Text style={styles.navItemStyle} &gt;
                  MY ROTA
                  &lt;/Text&gt;
                &lt;/View&gt;
              &lt;/TouchableOpacity&gt;
              &lt;TouchableOpacity
                onPress={() =&gt; this.props.navigation.navigate('LrmDocsContainer')}
              &gt;
                &lt;View style={[styles.navSectionStyle, getCurrentCoordinates('LrmDocsContainer') &amp;&amp; styles.navItemSel]}&gt;
                  &lt;Text style={styles.navItemStyle} &gt;
                  LRM DOCS
                  &lt;/Text&gt;
                &lt;/View&gt;
              &lt;/TouchableOpacity&gt;
  
              &lt;TouchableOpacity onPress={this.logOutHandler}&gt;
                &lt;View style={styles.navSectionStyle}&gt;
                  &lt;Text style={styles.navItemStyle} &gt;
                  SIGN OUT
                  &lt;/Text&gt;
                &lt;/View&gt;
              &lt;/TouchableOpacity&gt;
            &lt;/View&gt;
  
            &lt;View style={styles.navSection}&gt;
  
              &lt;Text style={styles.navSectionTitle}&gt;Current Shift Options:&lt;/Text&gt;
              &lt;TouchableOpacity
                onPress={() =&gt; this.props.navigation.navigate('CheckInContainer')}
              &gt;
                &lt;View style={[styles.navSectionStyle, isLoggedIn() &amp;&amp; styles.checkedInHide, getCurrentCoordinates('CheckInContainer') &amp;&amp; styles.navItemSel]}&gt;
                  &lt;Text style={styles.navItemStyle} &gt;
                  CHECK IN
                  &lt;/Text&gt;
                &lt;/View&gt;
              &lt;/TouchableOpacity&gt;
              &lt;TouchableOpacity
                onPress={() =&gt; this.props.navigation.navigate('CheckInContainer')}
              &gt;
                &lt;View style={[styles.navSectionStyle, !(isLoggedIn()) &amp;&amp; styles.checkedOutHide, getCurrentCoordinates('CheckInContainer') &amp;&amp; styles.navItemSel]}&gt;
                  &lt;Text style={styles.navItemStyle} &gt;
                  CHECK OUT
                  &lt;/Text&gt;
                &lt;/View&gt;
              &lt;/TouchableOpacity&gt;
  
            &lt;/View&gt;
          &lt;/ScrollView&gt;
          &lt;View style={styles.footerContainer}&gt;
            &lt;CopyrightSpiel color="LightGrey"/&gt;
          &lt;/View&gt;
        &lt;/View&gt;
      );
    }
  }
  
  const styles = StyleSheet.create({
    header:{
      flexDirection:'row',
  
      justifyContent:'center',
    },
    closeBtnWrap:{
      position:'absolute',
      left:15,
      top:0,
      opacity:0.8,
    },
    closeBtnImg:{
      width:22,
      height:22
  
    },
    container:{
      backgroundColor:'#1C2344',
      alignSelf:'stretch',
      flex:1,
      paddingTop:50,
      borderLeftColor:'#F7931E',
      borderLeftWidth:1
    },
    logoBlock:{
      alignSelf:'center',
  
    },
  
    homeBlockImg:{
      marginTop:10,
      width:60,
      height:105,
  
    },
    navSectionStyle:{
      alignItems:'stretch',
      textAlign: 'center',
      backgroundColor:'rgba(255,255,255,0.1)',
      paddingTop:8,
      paddingBottom:8,
      marginTop:15,
    },
    navItemSel:{
      backgroundColor:'rgba(255,255,255,0.9)',
    },
    navItemSelText:{
      color:'#1C2344',
    },
    navItemStyle:{
      color:'#F7931E',
      fontSize:24,
      alignSelf:'center'
  
    },
    navSection:{
      marginTop:30
  
    },
    navSectionTitle:{
      color:'rgba(255,255,255,0.5)',
      marginLeft:15,
  
    },
    footerContainer:{
      paddingBottom:15,
    },
    checkedInHide:{
      display:'none',
    },
    checkedOutHide:{
      display:'none',
    },
  
  });
  
  const mapDispatchToProps = dispatch =&gt; {
    return {
      onTryLogout: () =&gt; dispatch(authLogout()),
      clearUser: () =&gt; dispatch(clearUser())
    };
  };
  
  export default connect(null, mapDispatchToProps)(withNavigation(SideMenu));
  </code></pre>
  
  <p>which works fine - </p>
  
  <p>I then have the following in my sub view header:</p>
  
  <pre><code>    import React from 'react';
  import {View, Image, Text, StyleSheet, TouchableOpacity, Button} from 'react-native';
  import PropTypes from 'prop-types';
  import { withNavigation } from 'react-navigation';
  import { StackActions } from 'react-navigation';
  
  
  
  class FixedHeader extends React.Component {
    render() {
      const popAction = StackActions.pop({
        n: 0,
      });
      return (
  
        &lt;View style={FixedHeaderStyles.sectionHeader}&gt;
          &lt;View style={FixedHeaderStyles.sectionHeaderTopLine}&gt;
            &lt;View style={[FixedHeaderStyles.sectionHeaderBack, !(this.props.backButton) &amp;&amp; FixedHeaderStyles.sectionHeaderHide ]}&gt;
  
  
  
              &lt;TouchableOpacity
                onPress={() =&gt;   this.props.navigation.dispatch(popAction)}
              &gt;
                &lt;Text style={FixedHeaderStyles.sectionHeaderText}&gt;&amp;#x3c; Back&lt;/Text&gt;
              &lt;/TouchableOpacity&gt;
            &lt;/View&gt;
            &lt;View style={FixedHeaderStyles.logoBlock}&gt;
              &lt;Image style={FixedHeaderStyles.homeBlockImg} source={require('../../images/logosmall.png')} /&gt;
            &lt;/View&gt;
            &lt;View style={FixedHeaderStyles.homeBlockBurger} &gt;
  
              &lt;TouchableOpacity  onPress={() =&gt; this.props.navigation.toggleDrawer() }&gt;
  
                &lt;Image
                  style={FixedHeaderStyles.homeBurgerImg}
                  source={require('../../images/icons/ico-burger.png')}
                /&gt;
  
              &lt;/ TouchableOpacity&gt;
            &lt;/View&gt;
          &lt;/View&gt;
  
        &lt;/View&gt;
      );
    }
  }
  
  FixedHeader.propTypes = {
    backButton: PropTypes.bool.isRequired,
    navigate: PropTypes.object,
  };
  
  const FixedHeaderStyles = StyleSheet.create({
    sectionHeadeLogo:{
  
      width:45,
      height:58,
      alignSelf:'center'
  
    },
    sectionHeader:{
      backgroundColor:'#1C2344',
      flex:1.8,
      alignSelf:'stretch',
      borderBottomColor:'#f79431',
      borderBottomWidth:1,
    },
    sectionHeaderTopLine:{
      height:120,
      paddingTop:45,
      borderBottomColor:'#f79431',
      borderBottomWidth:1,
      flexDirection:'row',
      justifyContent:'center',
      alignItems:'center'
    },
  
    homeBlockBurger:{
      position:'absolute',
      right:0,
      marginRight:15,
      top:56
    },
    logoBlock:{
      alignSelf:'flex-start',
    },
    homeBlockImg:{
      width:45,
      height:58,
      alignSelf:'center',
  
    },
    homeBurgerImg:{
      width:40,
      height:40,
    },
    sectionHeaderHide:{
      display:'none',
  
    },
    sectionHeaderBack:{
      position:'absolute',
      left:15,
      top:70,
    },
    sectionHeaderText:{
      color:'#fff',
    },
  
  
  });
  
  
  export default withNavigation(FixedHeader);
  </code></pre>
  
  <p>The page navigates fine to the subview - but when pressing back the page jumps to the root (login page) rather than the previous page.  For example - I navigate to rota from home, click back and jump back to login..  can anyone shine any light on this and point me in the correct direction - I've read the documentation but cant figure out whats going astray...</p>
  
  <p>My Dependencies are as follows:</p>
  
  <p><a href="https://i.stack.imgur.com/wBBk6.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wBBk6.png" alt="enter image description here"></a></p>