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?

Solution 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.

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

Solution 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