Bad behaviour in Tabs Navigation With Stack Navigation

Question

I'm setting up a Tabs with Stack navigation and I have an unexpected behavior when I try to change the components. I want to open the first component of Stack navigation when I navigate through Tabs. Please check out this video, so you understand what I mean.

I try to pass the props 'initialRouteName' but doesn't work. Here is my code:

const familyStackNavigator = createStackNavigator({
  main: { screen: parentFamilyScreen },
  resume: { screen: ResumeChildScreen }
},
{
  mode: 'modal',
  headerMode: 'none',
  initialRouteName: 'main',
});

const parentAppStack = createMaterialBottomTabNavigator({
  family: {
    screen: familyStackNavigator,
    navigationOptions: {
      tabBarIcon: FirstTabIcon,
      title: 'Familia'
    }
  },
  bag: {
    screen: parentBagScreen,
    navigationOptions: {
      tabBarIcon: SecondTabIcon,
      title: 'Bolsillo'
    }
  },
  {
    initialRouteName: 'family',
    activeColor: '#ED0F21',
    inactiveColor: '#333333',
    barStyle: { backgroundColor: 'white' },
    labeled: true
  })

Answer 1

You have 2 choices here:

Either hide your bottomTabNavigator inside the nested screen to prevent it from navigating or use the react-navigation's navigation events.

These are the docs https://reactnavigation.org/docs/en/navigation-events.html for declaring them inside the render

These are the docs https://reactnavigation.org/docs/en/navigation-prop.html#addlistener-subscribe-to-updates-to-navigation-lifecycle for adding an eventListener inside the screen

You can then use willBlur to do a pop(1) of your screen