Title not working on react-navigation createStackNavigator

Question

I'm using createStackNavigator inside createBottomTabNavigator from react-navigation in my app. I want to have a title on my screen. Following React Navigation's tutorial I've implemented it this way:

createBottomTabNavigator(
    {
      Home: createStackNavigator(
       {screen: HomePage, navigationOptions: () => { title: 'Home'}}),
      ...
    },

However, nothing is displayed in the navigation bar. I've also tried headerTitle though no avail.

What am I doing wrong?

Answer 1

There are 2 ways of setting navigationOptions, object or function

Object

{
    screen: HomePage,
    navigationOptions: { title: 'Home' }
}

Function that return an object

{
    screen: HomePage,
    navigationOptions: ({ navigation }) => {
       return { title: 'Home' }
    }
}

Your code doesn't work is due to you have error in your arrow function, you should add a bracket around the body so that it returning the object.

{ screen: HomePage, navigationOptions: () => ({ title: 'Home'}) }

Answer 2

navigationOptions shouldn't be a function, instead, is a JSON. So, remove the arrows and do it like this:

createBottomTabNavigator(
{
  Home: createStackNavigator(
   {screen: HomePage, navigationOptions: { title: 'Home'},
  ...
},