CODEWITHSUNDEEP
react-nativereact-native-tabnavigator
myTest532 myTest532
myTest532 myTest532

Reputation: 2381

Change tab navigator name and header

I'm new in react native and I created a bottom tab navigator. I have 3 menus: Home, Tenants, and WorkOrders. How can I change the WorkOrders to display the button name and header as "Work Orders" instead of "WorkOrders"?

const MainTabNavigator = createBottomTabNavigator({
    Home,
    Tenants,
    WorkOrders
}, {
  navigationOptions: ({ navigation }) => {
      const { routeName } = navigation.state.routes[navigation.state.index];
      return {
        headerTitle: routeName
      };
  }
});

const MainStackNavigator = createStackNavigator({
    MainTabNavigator
}, {
  defaultNavigationOptions: ({ navigation }) => {
      return {
        headerLeft: (
          <Icon
            style={{ paddingLeft: 10 }}
            onPress={() => navigation.openDrawer()}
            name="md-menu"
            size={30}
          />
        )
      };
    }
});

const AppDrawerNavigator = createDrawerNavigator({
  Menu: {
    screen: MainStackNavigator
  }
});

const AppSwitchNavigator = createSwitchNavigator({
  Login: { screen: Login },
  Main: { screen: AppDrawerNavigator }
});

const AppContainer = createAppContainer(AppSwitchNavigator);

Thanks

Upvotes: 0

Views: 2076

Answers (1)

sunrise1002
sunrise1002

Reputation: 21

You can do like this:

const MainTabNavigator = createBottomTabNavigator({
  ...,
  WorkOrders: {
    screen: WorkOrders,
    navigationOptions: {
      title: 'Work Orders'
      // You can check more options here: https://reactnavigation.org/docs/en/bottom-tab-navigator.html#navigationoptions-for-screens-inside-of-the-navigator
    }
  }
},{
  // BottomTabNavigatorConfig
})

You can do the same with other react-navigation's API

Upvotes: 2

Related Questions