How to apply border to selected tab in React native?

Question

Do you have any idea to apply 2px border bottom of selected tab? I'm using react-native-router-flux module for tabbar and routings.

Above image, the dark 2px border activated to selected tab. This is what I want.

Above actually what I done. I can activate conditional icon color, but I don't know how to apply border to selected tab.

Do you have any idea of this?

import React, {Component} from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View
} from 'react-native';
import {Provider} from 'react-redux';
import {Scene, Router, Tabbar} from 'react-native-router-flux';
import TodoListComponent from './app/components/TodoListComponent';
import TabComponent1 from './app/components/TabComponent1';
import TabComponent2 from './app/components/TabComponent2';
import TabComponent3 from './app/components/TabComponent3';
import {Icon} from 'react-native-elements';
import {configureStore} from './app/store';


const TabIcon = ({ selected, title, iconName }) => {
    return (
        <View>
            <Icon
                name={iconName}
                color={selected? '#473332' : '#bdb8bc'}
                size={35}
            />
        </View>
    )
};


export default class AppComponent extends Component {
    render() {
        return (
            <Provider store={configureStore()}>
                <Router>
                    <Scene key="root">
                        <Scene key="todoList" tabs tabBarStyle={{ top: 72, height: 76, backgroundColor: '#f1f2f4', borderColor: '#e6e7e9', borderBottomWidth: 1}} initial>
                            <Scene key="list" title="First Tab" iconName="list" icon={TabIcon}>
                                <Scene key="scarlet" component={TabComponent1} hideNavBar initial />
                            </Scene>
                            <Scene key="alarm" title="Second Tab" iconName="alarm" icon={TabIcon}>
                                <Scene key="scarlet2" component={TabComponent2} hideNavBar initial />
                            </Scene>
                            <Scene key="settings" title="Third Tab" iconName="settings" icon={TabIcon}>
                                <Scene key="scarlet3" component={TabComponent3} hideNavBar initial />
                            </Scene>
                        </Scene>
                    </Scene>
                </Router>
            </Provider>
        );
    }
}


AppRegistry.registerComponent('AppComponent', () => AppComponent);

Answer 1

Use tabBarSelectedItemStyle

  tabBarSelectedItemStyle: {
    borderBottomWidth: 2,
    borderBottomColor: 'red',
  },