title: Change bottom border color of selected tab bar item
body: <p>I have the following code in react-native</p>
  
  <pre><code>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 &lt;View&gt;&lt;/View&gt;;
    }
  
  }
  
  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;
  </code></pre>
  
  <p>This is what it looks like when rendered in Android emulator</p>
  
  <p><a href="https://i.stack.imgur.com/6KtE4.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/6KtE4.jpg" alt="enter image description here"></a></p>
  
  <p><strong>I want the yellow underline to be RED underline instead.  But my rules for <code>tabBarSelectedItemStyle</code> that declare a red underline are not being acknowledged. How do I make the underline of selected tab bar items to be red?</strong></p>