React-Navigation with redux - Back button in StackNavigator nested within TabNavigator triggers back action in both navigators

Question

I have react-navigation setup with redux. My app consists of a parent TabBarNavigator with a login and content screen. The content Screen is itself a Stack Navigator that contains the main nav for the app. All other aspects of the redux and navigators work as expected, but the default back button on the StackNavigator also triggers it's parent TabBarNavigator to go back.

Is this expected behavior? I notice that if I define headerLeft in navigationOptions like this, it works as expected:

static navigationOptions = ({ navigation }) => {
    return {
      headerLeft: (
        <Button transparent onPress={() => { navigation.goBack(); }}><Text>Back</Text></Button>
      )
    };
  };

Cam anyone explain what causes this? Is there a way to make the default stackNavigator back button work with redux?

Answer 1

Maybe dispatching an action will work better:

    onPress={() => {
      navigation.dispatch(NavigationActions.navigate({
        routeName: '<screen name here>'
      }));
    }}

Answer 2

You can do one thing on onPress event, before call the goBack() you have to dispatch your action for that particular redux:

static navigationOptions = ({ navigation }) => {
return {
  headerLeft: (
    <Button 
        transparent 
        onPress={() => { 
          <ACTION_DISPATCH>
          navigation.goBack(); 
        }}>
        <Text>Back</Text>
   </Button>
  )
};};