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

Question

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):

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?

Answer 1

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