CODEWITHSUNDEEP
androidreact-nativejsxreact-navigationtabnavigator
Ajeet Singh
Ajeet Singh

Reputation: 2009

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.

Upvotes: 5

Views: 34635

Answers (4)

Kumquat601
Kumquat601

Reputation: 106

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!

Upvotes: 2

Ajeet Singh
Ajeet Singh

Reputation: 2009

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.

Upvotes: 10

Val
Val

Reputation: 22807

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)

enter image description here

Upvotes: 2

nils
nils

Reputation: 81

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

Upvotes: 2

Related Questions