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?

Koblas

Answer 1

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.

Vankirk

are there performance implications with your suggested approach? More overhead from making each tab a StackNavigator? – Koblas

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 – Vankirk

A navigator has to be much more complex, than a simple component | screen, – Vankirk

Answer 2

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" }}
      />

Dichasium

Answer 3

     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

Ottinger

Answer 4

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"
            }
          }
        });

Morbilli

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 – Fraga