CODEWITHSUNDEEP
react-nativetabnavigator
learningtech
learningtech

Reputation: 33673

Change bottom border color of selected tab bar item

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

enter image description here

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?

Upvotes: 14

Views: 27809

Answers (2)

Zeeshan Ali Khan
Zeeshan Ali Khan

Reputation: 141

In the case you are using react-native-tab-view

import {TabView, TabBar, SceneMap} from "react-native-tab-view";

    const renderTabBar = (props) => (
    <TabBar
        {...props}
        indicatorStyle={{
            backgroundColor: "black",
        }}
        pressColor="#b3bb"
        activeColor={"black"}
        inactiveColor={"black"}
        style={{
            marginTop: 25,
            backgroundColor: "white",
        }}
      />
   );
    //rest of code

Upvotes: 0

bennygenel
bennygenel

Reputation: 24660

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);

Upvotes: 43

Related Questions