How to change the background color of selected bottom tab in react native navigation

Question

I am using react native navigation v2 for by application. I need to change the background color of the selected bottom tab.

options: {
    bottomTab: {
        icon: val.icon,
        text: val.text,
        textColor: getColorTheme("SECONDARY", "LIGHT"),
        selectedTextColor: getColorTheme("ORANGE", "LIGHT"),
        selectedIconColor: getColorTheme("ORANGE", "LIGHT"),
        fontFamily: FONTFAMILY.SEMIBOLD,
        fontSize: FONTSIZE.FONT_12,
        selectedFontSize: FONTSIZE.FONT_12,
        selectedBackgroundColor:'red'
    }
}

You Should consider switching off to v5 because v2 seems to be very old. — yesIamFaded, Apr 29 '20 at 13:19
@yesIamFaded is it possible to change the background color of active tab in v5? v2 it cannot be done? — Dinesh babu, Apr 30 '20 at 06:06
yes you can definitly change the tab colors to your needs in v5 — yesIamFaded, Apr 30 '20 at 09:30

score -2 · Answer 1 · answered Apr 29 '20 at 14:20

as @yeslamFaded it could be a good idea to use a newer version of react-navigation.

if you want to change the background color of the selected tab you can use the activeBackgroundColor prop of tabBarOptions when you are creating the bottom tab navigator

for instance :

export default createBottomTabNavigator(
  {
    Home: HomeScreen,
    Settings: SettingsScreen,
  },
  {
    tabBarOptions: {
      activeBackgroundColor: 'tomato',
    },
  }
);

All the properties are available in the documentation here

Provided solution from reactnavigation, question for react-native-navigation — Chandra Kant Paliwal, May 19 '20 at 09:09

How to change the background color of selected bottom tab in react native navigation

1 Answers1