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.
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.