React Native and React Navigation — How to get screen title to show in header and bottom tab navigator to also show

Question

I am teaching myself React Native and building a fairly simple app,irMobile.

I've set up each screen with (using the About screen as an example)

static navigationOptions = () => ({
  title: 'About'
})

and in my app's main component

const MainNavigator = createBottomTabNavigator({ About })
const StackNavigator = createStackNavigator({ MainNavigator })
const AppContainer = createAppContainer(StackNavigator)

then in the component itself

  render() {
    return (
      <View style={styles.container}>
        <AppContainer />
      </View>
    )
  }

My screens render with a nice nav bar at the bottom but I don't get any titles in the header, just an empty space.

I've gone through the docs several times looking to see what I have missed and I'm stumped.

If I use the inspector in the iOS simulator I can select the header and it shows it to be a View at x: 0, y: 44 with width: 375 and height: 43.7, so the thing is there I just can't see it.

I've tried setting a headerStyle to { backgroundColor: 'red' } to see if I can at least see that, but no.

However, if I change the StackNavigator to put the About screen in there along with the MainNavigator as follows:

const StackNavigator = createStackNavigator({ About, MainNavigator })

Then I get my header showing up as expected, but the bottom tab bar no longer shows.

So that's confusing.

The docs are a bit vague on how to get both a header and a bottom tab navigator into the same app. Clearly, being a bit of a React Native noob here, I am missing something really obvious and simple.

What am I failing to understand and how do I fix this?

Source code at github.com/davesag/irMobile.

Answer 1

Okay I have worked it out.

The trick is to use getActiveChildNavigationOptions.

So now my code looks like

const navBar = useStorybook({ Balances, Settings, About })
const MainNavigator = createBottomTabNavigator(navBar, {
  navigationOptions: ({ navigation, screenProps }) =>
    getActiveChildNavigationOptions(navigation, screenProps)
})
const StackNavigator = createStackNavigator({ MainNavigator })
const AppContainer = createAppContainer(StackNavigator)

As @Remeus pointed out, the titles in my actual screen components were only making it to the MainNavigator and not accessible by the StackNavigator.

Rather than invert my stack however and create a StackNavigator for each tab, it seems to me to be cleaner to leverage getActiveChildNavigationOptions to grab the screen components' title (and other) navigationOptions.

This works perfectly.

Answer 2

By setting navigationOptions inside the component, you apply it to the navigation element that is calling the component.

So in your case, the title you define in About applies to the bottom tab, and not to the screen as you would like to.

Rather than setting navigationOptions as a static property inside the component, you need to define it directly when creating the stack navigation.

In addition to this, I think you want to nest the stack inside the bottom tab navigation, not the other way around. By doing so, you can have a different title for each screen.

Here is an example:

const AboutStack = createStackNavigator({ About: { screen: About, navigationOptions: { title: 'About Title' } } });
const CreditStack = createStackNavigator({ Credit: { screen: Credit, navigationOptions: { title: 'Credit Title' } } });

const MainNavigator = createBottomTabNavigator({
  About: { screen: AboutStack, navigationOptions: { title: 'About Label' } },
  Credit: { screen: CreditStack, navigationOptions: { title: 'Credit Label' } },
});

const AppContainer = createAppContainer(MainNavigator);

Like this, the header title will be "About Title" and the tab label "About Label".