Search code examples
androidreact-nativejsxreact-navigationtabnavigator

Tab bar background color did not get changed


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.

enter image description here

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

  • 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:

    enter image description here

    Posting the answer because it may help for someone.