CODEWITHSUNDEEP
react-nativereact-navigation
doctopus
doctopus

Reputation: 5647

How to change both header text and tab text in React-Navigation?

I have a nested stack navigator within a tab navigator like so:

const MainNavigator = createBottomTabNavigator({
  BookmarksList: createStackNavigator({
    BookmarkList: { screen: BookmarkList },
    UpdateBookmark: { screen: UpdateForm }
  }),
  NewBookmark: createStackNavigator({
    NewBookmark: { screen: NewBookmarkScreen }
  })
});

When I set navigationOptions title text for BookmarkList, it only changes the header text, but not the tab text.

For example, I've set my BookmarkList title to My Bookmarks.

class BookmarkList extends Component {
  static navigationOptions = {
    title: 'My Bookmarks'
  };    
}

This gets reflected in the header text, but not in the tab text, which still says BookmarkList (circled in red):

enter image description here

How do I get both header and tab text to change to the same text?

tldr; Customising title via navigationOptions only changes header text, but not tab text in nested stack navigator within tab navigator. How to change both header and tab text?

Upvotes: 4

Views: 6106

Answers (2)

Manuel Alanis
Manuel Alanis

Reputation: 356

I had two duplicate headers with the solution of @aciobanita, because I have a parent AppContainer, it is necessary to deactivate the header of the parent and then use the solution of @aciobanita, its works for me without problem

const AppNavigator = createStackNavigator(
  {
    MainApplication: { 
      screen: MainApplication,
    },
  },
  {
    headerMode: 'none'
  }
);

export default createAppContainer(AppNavigator);

Child component: 

    const BookmarksList = createStackNavigator({
      BookmarkList: { screen: BookmarkList },
      UpdateBookmark: { screen: UpdateForm },
    });

    const NewBookmark = createStackNavigator({
      NewBookmark: { screen: NewBookmarkScreen },
    });

    const MainNavigator = createBottomTabNavigator({
      BookmarksList: {
        screen: BookmarksList,
        navigationOptions: {
          title: 'My Bookmarks',
        },
      },
      NewBookmark: {
        screen: NewBookmark,
        navigationOptions: {
          title: 'New Bookmarks',
        },
      },
    });


export default createAppContainer(MainNavigator);

Upvotes: 4

aciobanita
aciobanita

Reputation: 91

One solution:


    const BookmarksList = createStackNavigator({
      BookmarkList: { screen: BookmarkList },
      UpdateBookmark: { screen: UpdateForm },
    });

    const NewBookmark = createStackNavigator({
      NewBookmark: { screen: NewBookmarkScreen },
    });

    const MainNavigator = createBottomTabNavigator({
      BookmarksList: {
        screen: BookmarksList,
        navigationOptions: {
          title: 'My Bookmarks',
        },
      },
      NewBookmark: {
        screen: NewBookmark,
        navigationOptions: {
          title: 'New Bookmarks',
        },
      },
    });

Upvotes: 5

Related Questions