React navigation add the tab title

Question

I add the tab navigator for my project below.

// BottomTabRouter.js
import Message from "../components/message/Message";
import Address from "../components/address/Address";
import Life from "../components/life/Life";
import Personal from "../components/personal/Personal";

const BottomTabRouter = createBottomTabNavigator(
  {
    Message: Message,
    Address: Address,
    Life: Life,
    Personal: Personal
  }
);

The BottomTabRouter under the root stack.

const DashboardRouter = createStackNavigator({
  Tabs: BottomTabRouter,
  Chat: Chat,
  UserGroup: UserGroup,
});

If I want to add the title for Message screen, I add the navigationOptions below.

class Life extends React.Component {
  static navigationOptions = {
    title: "Life"
  };

  ...
}

But it seems not work, how and what can I do to add title for my Life component?

Answer 1

I think you need to use tabBarLabel property

class Life extends React.Component {
  static navigationOptions = {
    tabBarLabel: "Life"
  };

  ...
}

Answer 2

It seems have a buggy reference to official doc and I make the best choice for my case.

// Life Router

const LifeRouter = createStackNavigator({
  Life: Life,
  Friends: Friends,
  Find: Find
});

// tabBar hidden configure

LifeRouter.navigationOptions = ({ navigation }) => {
  let tabBarVisible = true;
  if (navigation.state.index > 0) {
    tabBarVisible = false;
  }

  return {
    tabBarVisible
  };
};

// create a stack under tabNavigator
// so I can add the title navigationOption to the specific screen

const DashboardRouter = createBottomTabNavigator(
  {
    Message: MessageRouter,
    Adress: AddressRouter,
    Life: LifeRouter,
    Personal: PersonalRouter
  },
  ...
);

// hide tab header configure

DashboardRouter.navigationOptions = {
  header: null
};