React-navigation - goBack behaviour in nested navigators (stack inside drawer)

admin

Administrator
Staff member
I'm using a
Code:
stack
navigator inside
Code:
drawer
navigator - recently upgraded from v4. Trying to implement custom back button on headerLeft.
Code:
goBack
function on the stack screen is going back on the drawer navigator instead of the
Code:
stack
. I don't know if I'm missing something or if it's a bug on v5. The
Code:
goBack
should go to the previous screen in the
Code:
stack
not the
Code:
drawer
. See the gif below; using the gesture goes back on the
Code:
stack
and the default back button on the header goes back onto the
Code:
stack
too. It's only my custom back button with the problem.
<a href=" " rel="nofollow noreferrer"><img src=" " alt="enter image description here" /></a>
Code:
export function BlogsStack({navigation}) {
  return (
    &lt;Stack.Navigator
      initialRouteName={'Blogs'}
      screenOptions={{
        gestureEnabled: true,
        gestureDirection: 'horizontal',
        cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS,
        headerStyle: {
          borderBottomWidth: 0,
          elevation: 0,
          shadowOpacity: 0,
        },
        headerTintColor: themeVars.headerTintColor,
        headerBackground: () =&gt; {
          return &lt;HeaderBackground /&gt;;
        },
      }}&gt;
      &lt;Stack.Screen
        name=&quot;Blogs&quot;
        component={Blogs}
        options={{
          title: 'Blogs',
          headerTitle: () =&gt; (
            &lt;View&gt;
              &lt;HeaderButton title={'Blogs'} /&gt;
            &lt;/View&gt;
          ),
          headerLeft: () =&gt; (
            &lt;TouchableOpacity
              onPress={() =&gt; navigation.toggleDrawer()}
              style={drawerStyles.menuIconContainer}&gt;
              &lt;FeatherIcon
                style={drawerStyles.menuIcon}
                name=&quot;menu&quot;
                size={themeVars.hamburgerIconSize}
                color={themeVars.hamburgerIconColor}
              /&gt;
            &lt;/TouchableOpacity&gt;
          ),
          headerRight: () =&gt; &lt;View /&gt;,
        }}
      /&gt;
      &lt;Stack.Screen
        name=&quot;BlogSingle&quot;
        component={BlogSingle}
        options={{
          headerTitle: () =&gt; (
            &lt;View&gt;
              &lt;HeaderButton title={'Blog'} /&gt;
            &lt;/View&gt;
          ),
          headerLeft: () =&gt; (
            &lt;TouchableOpacity
              onPress={() =&gt; navigation.goBack()}
              style={drawerStyles.menuIconContainer}&gt;
              &lt;FeatherIcon
                style={drawerStyles.menuIcon}
                name=&quot;chevron-left&quot;
                size={themeVars.hamburgerIconSize}
                color={themeVars.hamburgerIconColor}
              /&gt;
            &lt;/TouchableOpacity&gt;
          ),
          headerRight: () =&gt; &lt;View /&gt;,
        }}
      /&gt;
    &lt;/Stack.Navigator&gt;
  );
}


export class Navigation extends Component {
  constructor(props, context) {
    super(props, context);
  }

  render() {
    return (
      &lt;NavigationContainer ref={navigationRef}&gt;
        &lt;AppDrawer.Navigator
          initialRouteName={'Home'}
          drawerContent={props =&gt; &lt;DrawerContent {...props} /&gt;}
          drawerContentOptions={{
            labelStyle: {
              fontFamily: themeVars.boldFont,
              color: themeVars.primaryColor,
            },
            activeTintColor: 'black',
            activeBackgroundColor: 'black',
            inactiveTintColor: 'white',
            inactiveBackgroundColor: 'white',
            itemStyle: {
              marginVertical: 0,
              borderWidth: 1,
              borderColor: 'red',
              margin: 0,
              padding: 0,
            },
          }}&gt;
          &lt;AppDrawer.Screen
            name=&quot;Home&quot;
            component={HomeStack}
            initialRouteName={'Home'}
            options={{
              drawerLabel: 'Home ',
              drawerIcon: () =&gt; (
                &lt;FeatherIcon
                  color={themeVars.primaryColor}
                  name=&quot;home&quot;
                  size={themeVars.drawerIconSize}
                /&gt;
              ),
            }}
          /&gt;
          &lt;AppDrawer.Screen
            initialRouteName=&quot;Blogs&quot;
            backBehavior=&quot;order&quot;
            name=&quot;Blogs&quot;
            component={BlogsStack}
            options={{
              drawerLabel: 'Blogs ',
              drawerIcon: () =&gt; (
                &lt;FontAwesome5
                  color={themeVars.primaryColor}
                  name=&quot;wordpress&quot;
                  size={themeVars.drawerIconSize}
                /&gt;
              ),
            }}
          /&gt;
        &lt;/AppDrawer.Navigator&gt;
      &lt;/NavigationContainer&gt;
    );
  }
}