React-navigation: header does not show up when using bottom tab navigator

Question

I am using react-navigation with my react native app. I have created a bottom tab navigator, and want to use the built in header on my screen. But the header is not showing up. There are no errors or warnings.

app.js:

const TabStack = createBottomTabNavigator({
  Upload: { 
    screen: upload,
    navigationOption: {
      headerTitle: "Upload"
    }
  },
  Profile: { 
    screen: profile,
    navigationOption: {
      headerTitle: "Profile"
    }
  }
});

const MainStack = createSwitchNavigator(
  {
    Home: { screen: TabStack }
  },
  {
    initialRouteName: 'Home'
  }
);

upload.js

class upload extends React.Component {
    static navigationOptions = {
        title: 'Upload'
    };

    constructor(props) {
        super(props);

    ...

I know declaring navigationOptions in the components is probably not needed since it is already declared in app.js but this is just to show that neither approach works.

How do I fix this?

score 11 · Accepted Answer · edited Apr 13 '20 at 11:29

11

TabNavigator is not shipped with a Header. The most common case is to make your TabNavigator the root navigator, and make each tab a StackNavigator you would then get the header cause it's part of the StackNavigator by default.

edited Apr 13 '20 at 11:29

Community

1
1

answered Mar 18 '19 at 21:35

Hend El-Sahli

6,268
2
25
42

are there performance implications with your suggested approach? More overhead from making each tab a StackNavigator? – JAM Mar 18 '19 at 22:05
3

I suggest if you're going to need a single screen per each tab, is to create a CUSTOM HEADER, and add it manually to your screens, I did that myself, and its not that hard. There's absolutely no need to create StackNavigator per tab, if you're gonna render one screen per stack – Hend El-Sahli Mar 18 '19 at 22:44
A navigator has to be much more complex, than a simple component | screen, – Hend El-Sahli Mar 18 '19 at 22:52

score 4 · Answer 2 · answered Nov 30 '20 at 14:52

The React Navigation docs also suggests adding a stack navigation for each tab.

The bottomTabNavigation screen does not have a header, but a normal StackNavigator does, so you can make your bottom tab open a normal StackNavigator.

Think of Instagram:
You open your home tab, and then enter a profile. When you go back, you still want to be in the home tab. So it's a Stack Navigation inside a Tab Navigation :)


const HomeStack = createStackNavigator();

function HomeStackScreen() {
  return (
    <HomeStack.Navigator initialRouteName="Feed">
      <HomeStack.Screen name="Feed" component={FeedScreen} />
      <HomeStack.Screen name="Profile" component={ProfileScreen} />
    </HomeStack.Navigator>
  );
}

const Tab = createBottomTabNavigator();

function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="Home"component={HomeStackScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

Then the StackNavigator screen will add a header based on the name of the screen. You can also define a custom header title:

      <HomeStack.Screen
        name="Home"
        component={HomeScreen}
        options={{ headerTitle: "Custom title" }}
      />

score 1 · Answer 3 · answered Apr 15 '20 at 13:59

     MyTabs = tabNavigator
     <Stack.Navigator>
     <Stack.Screen name="MyAccount" component={MyTabs} />
    </Stack.Navigator>

1) Use tabNavigator inside stack navigator as it comes with inbuilt header functionality. 2) stack navigator do not have inbuilt header

score 0 · Answer 4 · edited Dec 08 '20 at 09:54

0

it's work for me. try it as bellow

    const TabStack = createBottomTabNavigator({
          Upload: { 
            screen: createStackNavigator({Home: HomeScreen}),,
            navigationOption: {
              headerTitle: "Upload"
            }
          },
          Profile: { 
            screen: profile,
            navigationOption: {`enter code here`
              headerTitle: "Profile"
            }
          }
        });

edited Dec 08 '20 at 09:54

Ran Marciano

1,431
5
13
30

answered Dec 08 '20 at 09:34

Roshan Wickramaarachchi

411
4
7

2

Please don't post only code as an answer, but also provide an explanation of what your code does and how it solves the problem of the question. Answers with an explanation are usually more helpful and of better quality, and are more likely to attract upvotes – Ran Marciano Dec 08 '20 at 09:42

React-navigation: header does not show up when using bottom tab navigator

4 Answers4