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?

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.