I have the following code in react-native
import React, {Component} from 'react';
import {TabNavigator} from 'react-navigation';
import {View} from 'react-native';
class Home extends Component {
static navigationOptions = {
title:'Home',
tabBarLabel:'First'
};
render() {
return <View></View>;
}
}
const tabOptions = {
tabBarOptions: {
activeTintColor:'white',
inactiveTintColor:'#D3D3D3',
style:{
backgroundColor:'green',
borderTopWidth:1,
borderTopColor:'#D3D3D3'
},
tabBarSelectedItemStyle: {
borderBottomWidth: 2,
borderBottomColor: 'red',
},
},
}
const ProductNavigator = TabNavigator({
First: {screen: Home},
Second:{screen: Home}
},
tabOptions
);
export default ProductNavigator;
This is what it looks like when rendered in Android emulator
I want the yellow underline to be RED underline instead. But my rules for tabBarSelectedItemStyle
that declare a red underline are not being acknowledged. How do I make the underline of selected tab bar items to be red?
To style TabNavigator selected item's indicator you can use indicatorStyle
.
indicatorStyle - Style object for the tab indicator (line at the bottom of the tab).
Example
const tabOptions = {
tabBarOptions: {
activeTintColor:'white',
inactiveTintColor:'#D3D3D3',
style:{
backgroundColor:'green',
borderTopWidth:1,
borderTopColor:'#D3D3D3'
},
indicatorStyle: {
backgroundColor: 'red',
},
},
}
const ProductNavigator = TabNavigator({
First: {screen: Home},
Second:{screen: Home}
}, tabOptions);