CODEWITHSUNDEEP
react-nativereact-navigationreact-navigation-stack
Can Poyrazoğlu
Can Poyrazoğlu

Reputation: 34780

Title not working on react-navigation createStackNavigator

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?

Upvotes: 5

Views: 2844

Answers (2)

Ewe Tek Min
Ewe Tek Min

Reputation: 865

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'}) }

Upvotes: 6

SmoggeR_js
SmoggeR_js

Reputation: 3150

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'},
  ...
},

Upvotes: 1

Related Questions