Tab navigator adding header

Question

I am using React navigation. I want to add headers to my tab navigator components. How can I do that?

Tab navigation function

const TabNavigation = () => {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Home" component={Welcome} />
      <Tab.Screen name="Favorites" component={Favorites} />
      <Tab.Screen name="Profile" component={Profile} />
    </Tab.Navigator>
  );
};

Stack navigator function

<Stack.Navigator
          initialRouteName="SignIn">
          <Stack.Screen name="SignIn" component={SignIn} />
          <Stack.Screen name="TabNavigation" component={TabNavigation}/>
 <Stack.Navigator>

You can use https://reactnavigation.org/docs/material-top-tab-navigator/ — OAslan, Dec 18 '20 at 12:40
My goal is not to get the menus to the top. Just adding headers to menus. Menus should stay on the bottom — Gucal, Dec 18 '20 at 12:43
You can use `tabBarPosition="bottom"` prop to set it bottom and then use Stack.Screen options prop to customize the header — Andry, Dec 18 '20 at 12:58
Was referring to material-top-tab-navigator, that is what I am using personally for bottom tabs. Also posted an directing answer @Gucal — Andry, Dec 18 '20 at 13:18

Andry · Answer 1 · 2020-12-18T13:30:21.890

-1

You can customize your header dynamically in Stack Navigation screen options prop. For example you can create custom functions like getTitle to determine title dynamically depending on your route.

<Stack.Screen 
    name="TabNavigation"
    component={TabNavigation}
    options={({ route }) => ({ 
        //title: getTitle(route),
        //headerStyle: styles.headerStyle
        //headerTitleStyle: styles.headerTitleStyle
    })}
/>

edited Dec 18 '20 at 13:30

answered Dec 18 '20 at 13:07

Andry

339
7
23

Can't variable error for getTitle. getTitle is also not included in the document. – Gucal Dec 18 '20 at 13:29
This is the function you can implement yourself, updated description @Gucal – Andry Dec 18 '20 at 13:31
this is not a answer for this question – Zeeshan Ali Jul 18 '21 at 11:08

Tab navigator adding header

1 Answers1