Tab bar background color did not get changed

Question

I am new in React-Native development. I am using TabNavigator from 'react-navigation' for tab bar in React-Native, everything is working fine excepts tab bar activeBackgroundColor and inactiveBackgroundColor did not get changed in android. Its showing blue color only like the image given below.

Code i am using is:

import React, { Component } from 'react';
import { TabNavigator } from 'react-navigation';
import { PixelRatio } from 'react-native';

import { ColorScheme } from '../Resources/ColorScheme';
import {Fonts} from '../Resources/Fonts';

import TAB1 from '../Screens/TAB1'
import TAB2 from '../Screens/TAB2'
 /** */
 var FONT_SIZE = 8;
 if (PixelRatio.get() === 2) {
  FONT_SIZE=10
 }else if (PixelRatio.get() === 3) {
    FONT_SIZE=12
  }

export default FavoritesScreenTabNavigator=TabNavigator({
    TAB1:{screen:TAB1},
    TAB2:{screen:TAB2}
  },{
      tabBarPosition:'top',
      swipeEnabled:true,
      animationEnabled:true,
      tabBarOptions:{
          activeTintColor:ColorScheme.tabBarSelectedTintColor,
          inactiveTintColor:ColorScheme.tabBarUnSelectedTintColor,
          activeBackgroundColor:'white',
          inactiveBackgroundColor:'white',
          labelStyle:{
            fontSize: FONT_SIZE,
            fontFamily: Fonts.QuicksandBold,
            textAlign:'center'
          },
          indicatorStyle: {
            borderBottomColor:ColorScheme.tabBarSelectedTintColor,
            borderBottomWidth: 3,
          }
      },
  }
)

Any help will be appreciated.

Thanks in advance.

Solution 1

Thanks everyone for help, but style did the magic for me.
It changes the tab color from blue to white (the color I want).
Found the answer from shared link by @Val.
Just adding these 3 line in the code changed the design:

tabBarOptions:{
      //other properties
      pressColor: 'gray',//for click (ripple) effect color
      style: {
        backgroundColor: 'white',//color you want to change
      }
  }

Now Tab bar looks like:

Posting the answer because it may help for someone.

Solution 2

I haven't used the TabNavigator by my self since yet but, as far as the documentation describes the tabBarOptions, activeBackgroundColor and inactiveBackgroundColor are only supported for iOS. As seen here

I guess you have to add the behaviour for Android by yourself. There is a Expo Snack based on this GitHub Issue

Direct link to the expo

Solution 3

Refer to github react-native issue 1485, it's a bug (in)activeBackgroundColor not working on Android.

My workaround for this is to use indicatorStyle to simulate, example code:

Note: remember to add ...TabNavigator.Presets.AndroidTopTabs, indicator may not work without this.

tabBarOptions: {
    ...TabNavigator.Presets.AndroidTopTabs,
    indicatorStyle: {
        backgroundColor: mainBackgroundColor,
        borderColor: 'rgb(189,189,189)',
        borderWidth: 1,
        borderBottomWidth: 0,
        borderRadius: 5,
        borderBottomLeftRadius: 0,
        borderBottomRightRadius: 0,
    }
}

It looks fine in my project. (see Camera / NVR tabs)

Solution 4

I update Val's answer.

 tabBarOptions:{
      //other properties
      pressColor: 'gray',//for click (ripple) effect color
      style: {
        backgroundColor: 'white',//color you want to change
      },
      indicatorStyle: {
        backgroundColor: 'your indicator background color',
        height: '100%',
        borderBottomColor: 'your indicator bottom bar color',
        borderBottomWidth: 1
      },
  }

the hack is height value!

View more solutions