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

roy estephane · Accepted Answer · 2020-09-13 13:42:11Z

1

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

answered Sep 13, 2020 at 13:42

roy estephane

262 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React Navigation 5 : Implementing a custom header on a BottomTabNavigator

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related