React Navigation 5 : Implementing a custom header on a BottomTabNavigator

Question

I am using a BottomTabNavigator with 2 screens but I also want to use a custom header, which I imported, to each one of them. I have tried set an option to the Tab.Navigator by adding a setOptions in it:

const Tab = createBottomTabNavigator();

export default function App() {
    return(
      <NavigationContainer >
        <Tab.Navigator setOptions={{  
               headerTitle: <Header />
               //</Header> was imported
        }}>
              <Tab.Screen
                name="HomeScreen" 
                component={HomeScreen}
                options={{
                  tabBarLabel: 'Home',
                  tabBarIcon: ({ color, size }) => (
                    <AntDesign name="home" color={Colors.amarelo} size={30} />
                  )
                }}
              />

              <Tab.Screen
                name="GroupScreen" 
                component={GroupScreen}
                options={{
                  tabBarLabel: 'Home',
                  tabBarIcon: ({ color, size }) => (
                    <AntDesign name="car" color={Colors.amarelo} size={30} />
                  )
                }}
              />
          </Tab.Navigator>
      </NavigationContainer>
      )
}

However, my attempt was unsuccessful. I read that docs for React-Navigation 5 but I haven't found how to implement a custom header on a BottomTabNavigator

score 1 · Accepted Answer · answered Sep 13 '20 at 13:42

Bottom Tab navigator does not have a header. To do this you have to use stack Navigator inside each tab of the bottom tab navigator. So you need to create a stack navigator that have "HomeScreen" as screen, same for GroupScreen. Then, in the bottom tab navigator use the stack navigators as component for tab.screen.

Than you can customize headers of bottom tab navigator. I could post a short code if it helps you

React Navigation 5 : Implementing a custom header on a BottomTabNavigator

1 Answers1