React Native Tab nested into Stack navigation v5 - best practice to update header

Question

I am trying to understand what's the best approach to nested React Native Navigation v5.

I have a TabNavigation nested into a Stack.Navigator as follow:

const MainNavigation = () => {

  return (
    <SafeAreaProvider>
      <NavigationContainer>
        <StatusBar barStyle="light-content" />
        <Stack.Navigator screenOptions={navStackOptions} >
          <FirstListStack.Screen name="FirstListStack" component={TabNavigation} options={FirstNavOpt} />
          <FirstListStack.Screen name="AnotherView" component={AnotherView} options={AnotherViewNavOpt} />
          <SecondListStack.Screen name="SecondListStack" component={TabNavigation} options={SecondNavOpt} />
          <ThirdListStack.Screen name="ThirdListStack" component={TabNavigation} options={ThirdNavOpt} />
        </Stack.Navigator>
      </NavigationContainer>
    </SafeAreaProvider>
  );

  function TabNavigation() {
    return (
      <Tab.Navigator
        initialRouteName="TabOne"
      >
        <Tab.Screen name="TabOne" component={TabOne} options={navTabOptions} />
        <Tab.Screen name="TabTwo" component={TabTwo} options={navTabOptions} />
        <Tab.Screen name="TabThree" component={TabThree} options={navTabOptions} />
      </Tab.Navigator>
    );
  }

};

export default MainNavigation;

Now, when switching between the tabs, the stack navigation header does not get updated.

What's the best approach to access the state of the Stack Navigation and update its state? In particular to update the header buttons?

Let me know if my question is unclear. Many thanks.

score 0 · Accepted Answer · answered May 23 '20 at 03:04

I found a solution, but I am not sure is a good practice.

I changed the logic of the Navigation moving the Tab Nav as parent and the Stack Nav as child.

const Tab = createBottomTabNavigator();
const FirstListStack = createStackNavigator();
const SecondListStack = createStackNavigator();
const ThirdListStack = createStackNavigator();

const MainNavigation = () => {

  const navTabOptions = ({ route }) => ({
    tabBarVisible: isTabBarVisible(route)
  });

  return (
    <SafeAreaProvider>
      <NavigationContainer>
        <StatusBar barStyle="light-content" />
        <Tab.Navigator>
          <Tab.Screen name="First" component={FirstListStackScreen} options={navTabOptions} />
          <Tab.Screen name="Second" component={SecondListStackScreen} options={navTabOptions} />
          <Tab.Screen name="Third" component={ThirdListStackScreen} options={navTabOptions} />
        </Tab.Navigator>
      </NavigationContainer>
    </SafeAreaProvider>
  );

  function isTabBarVisible(route) {
    // Check here if the route.state is not undefined
    // and based on the route return true or false
    // to show or hide the tab bar
  }

  function FirstListStackScreen() {
    return (
      <FirstListStack.Navigator>
        <FirstListStack.Screen name="First" component={} />
      </FirstListStack.Navigator>
    );
  }

  function SecondListStackScreen() {
    return (
      <SecondListStack.Navigator>
        <SecondListStack.Screen name="Second" component={} />
      </SecondListStack.Navigator>
    );
  }

  function ThirdListStackScreen() {
    return (
      <ThirdListStack.Navigator>
        <ThirdListStack.Screen name="Third" component={} />
      </ThirdListStack.Navigator>
    );
  }

};

export default MainNavigation;

Please post any better solution to this. Thanks

React Native Tab nested into Stack navigation v5 - best practice to update header

1 Answers1