CODEWITHSUNDEEP
reactjsreact-nativereact-navigation
Hena Shiekh
Hena Shiekh

Reputation: 963

React-Navigation: Tab name and header name is same

I am using react-navigation, I have a nested StackNavigator insdie my TabNavigator Here is the code 

  const MainNavigator = TabNavigator({
 selectadmin: { screen: SelectAdminScreen },
 otp: { screen: OtpScreen },
 password: { screen: PasswordScreen },
 pin: { screen: PinScreen },
 main: {
   screen: TabNavigator({
     orders: {
           screen: StackNavigator({
             orderlist: { screen: OrderListScreen },
             orderdetail: { screen: OrderDetailScreen }
           })
         }
   },
   {
     tabBarPosition: 'bottom',
     lazy: true,
     tabBarOptions: {
       labelStyle: { fontSize: 12 }
     }
   })
 }
},
{
 navigationOptions: {
  tabBarVisible: false
},
tabBarPosition: 'bottom',
swipeEnabled: false,
lazy: true,
animationEnabled: false,
//backBehavior: 'none',
});

and inside my orderlist

    static navigationOptions = ({ navigation }) => ({
      title: 'Orders',
      headerRight: (
        <Button
          title="Settings"
          onPress={() => navigation.navigate('settings')}
          backgroundColor="rgba(0,0,0,0)"
          color="rgba(0,122,255,1)"
        />
      ),
      headerStyle: { marginTop: Platform.OS === 'android' ? 20 : 0 },
      tabBarIcon: ({ tintColor }) => {
      return <Icon name="favorite" size={30} color={tintColor} />;
     }
  })

But my tab and header name is same, i.e. Orders, How can I have different name for tab and header?

Upvotes: 2

Views: 11085

Answers (1)

William Matias
William Matias

Reputation: 354

In the Tabs you have the wrong property is suppose to be tabBarLabel instead of Title

To add a title to the stack navigation you need to specify the title property in the navigation options of the stack nativagation just like in the docs: https://reactnavigation.org/docs/navigators/stack

static navigationOptions = {
 title: 'Orders'
}

As for the title of the tab, it is a similar process. The attribute is tabBarLabel. In the navigation options for the tabNavigator. Here is the link for the docs: https://reactnavigation.org/docs/navigators/tab

static navigationOptions = {
   tabBarLabel: 'Details'
};

Upvotes: 15

Related Questions