CODEWITHSUNDEEP
react-nativereact-native-tabnavigator
Ibrahim Azhar Armar
Ibrahim Azhar Armar

Reputation: 25745

Is there a way to change tab bar style in component rather then App.js?

My app support English and Arabic with LTR and RTL support.

I am using BottomTabBarNavigation createBottomTabNavigator for tab menu and it works fine.

I have following styles setup for tab menu.

tabBarOptions: {
  labelStyle: {
    display: 'none',
  },
  activeTintColor: '#fdb64b',
  inactiveTintColor: 'gray',
  style: {
    paddingBottom: moderateScale(10),
    backgroundColor: '#000',
    height: moderateScale(50),
    paddingTop: moderateScale(9),
    borderTopColor: '#191919',
    borderTopWidth: moderateScale(1)
  }
}

In the above style, If I add flexDirection: 'row' or flexDirection: 'row-reverse' it gives me the desired style of flipping the direction of tab menu.

What I am trying to achieve is, I have a change language screen, I want the tab bar to apply the style of 'row-reverse' if Arabic is selected and 'row' when English is selected.

With something like this in tabBarOptions

flexDirection: global.IS_RTL ? 'row-reverse' : 'row'

The problem is I cannot do it in App.js, I want to do it in one of the component when the application is loaded, is there any way to acheive this in react-native?

Thanks

Upvotes: 0

Views: 577

Answers (1)

kumar ujjawal
kumar ujjawal

Reputation: 85

As per my opinion and experience, I will recommend using (native-base) Tab bar. It is easier than others and can be edited easily in the component. You can open it from (react-native base doc).

Upvotes: 1

Related Questions