title: How to add top border to tab that is active using react native bottom tabs
body: <p>I'm using react navigation v5. I am using the bottom tab navigator. I want to add a border to the top of the active tab. So far everything I've tried has not worked. Here is my navigation file (minus the imports):</p>
  <pre><code>const AuthStack = createStackNavigator()
  const InfoStack = createStackNavigator()
  const PhotoStack = createStackNavigator()
  const ProfitStack = createStackNavigator()
  const RehabStack = createStackNavigator()
  const DrawerNav = createDrawerNavigator()
  const TabNav = createBottomTabNavigator()
  
  const createAuthStack = () =&gt; (
     &lt;AuthStack.Navigator&gt;
        &lt;AuthStack.Screen name='Sign Up' component={SignUpScreen} /&gt;
        &lt;AuthStack.Screen name='Sign In' component={SignInScreen} /&gt;
     &lt;/AuthStack.Navigator&gt;
  )
  
  const stackOptions = {
     headerStyle: {
        backgroundColor: colors.colorGrayLight,
          borderBottomColor: colors.colorPrimary,
          borderBottomWidth: 2
     },
      
  }
  
  const createInfoStack = () =&gt; (
     &lt;InfoStack.Navigator screenOptions={stackOptions}&gt;
        &lt;InfoStack.Screen name='Info Stack' component={PropertyInfoScreen} /&gt;
     &lt;/InfoStack.Navigator&gt;
  )
  
  const createProfitStack = () =&gt; (
     &lt;ProfitStack.Navigator screenOptions={stackOptions}&gt;
        &lt;PhotoStack.Screen name='Profit Stack' component={ProfitCalculatorScreen} /&gt;
     &lt;/ProfitStack.Navigator&gt;
  )
  
  const createRehabStack = () =&gt; (
     &lt;RehabStack.Navigator screenOptions={stackOptions}&gt;
        &lt;RehabStack.Screen name='Rehab Stack' component={RehabCostsScreen} /&gt;
     &lt;/RehabStack.Navigator&gt;
  )
  
  const createPhotosStack = () =&gt; (
     &lt;PhotoStack.Navigator screenOptions={stackOptions}&gt;
        &lt;PhotoStack.Screen name='Photo Stack' component={PropertyPhotosScreen} /&gt;
     &lt;/PhotoStack.Navigator&gt;
  )
  
  const createScreenOptions = ({ focused, color, route }) =&gt; {
     let imgSrc
  
     switch (route.name.toLowerCase()) {
        case 'info':
           imgSrc = images.iconPropertyInfo
           break
        case 'profit':
           imgSrc = images.iconProfit
           break
        case 'rehab':
           imgSrc = images.iconRehab
           break
          case 'photos':
              imgSrc = images.iconPhotos 
              break
     }
  
     return {
        tabBarIcon: ({ focused, color }) =&gt; (
           &lt;View style={{ alignItems: 'center', marginTop: 10 }}&gt;
              &lt;Image
                 source={imgSrc}
                 resizeMode='contain'
                 style={{
                    width: 25,
                    height: 25,
                    tintColor: color,
                 }}
              /&gt;
              &lt;Text style={{ color: color, fontSize: 12 }}&gt;{route.name}&lt;/Text&gt;
           &lt;/View&gt;
        ),
  
         tabBarButton: (props) =&gt; {
           return (
              &lt;TabBarButton {...props} /&gt;
           )
         }
     }
  }
  
  const createTabNav = ({ route, navigation}) =&gt; {
     const focusedRoute = getFocusedRouteNameFromRoute(route)
  
     return (
        &lt;TabNav.Navigator
           tabBarOptions={{
              activeTintColor: colors.colorPrimary,
              inactiveTintColor: colors.colorCharcoal,
              keyboardHidesTabBar: true,
              allowFontScaling: false,
              style: {
                 backgroundColor: colors.colorGrayLight,
              },
              labelStyle: {
                 fontSize: 12,
              },
              showLabel: false,
           }}&gt;
           &lt;TabNav.Screen name='Info' component={createInfoStack} options={createScreenOptions}/&gt;
           &lt;TabNav.Screen name='Profit' component={createProfitStack} options={createScreenOptions} /&gt;
           &lt;TabNav.Screen name='Rehab' component={createRehabStack} options={createScreenOptions} /&gt;
           &lt;TabNav.Screen name='Photos' component={createPhotosStack} options={createScreenOptions} /&gt;
        &lt;/TabNav.Navigator&gt;
     )
  }
  
  export default MainNav = () =&gt; {
     const [isAuthenticated, setIsAuthenticated] = useState(false)
  
     return (
        &lt;NavigationContainer&gt;
           &lt;DrawerNav.Navigator&gt;
              &lt;DrawerNav.Screen name='Main' component={createTabNav} /&gt;
           &lt;/DrawerNav.Navigator&gt;
        &lt;/NavigationContainer&gt;
     )
  }
  </code></pre>
  <p>I attempted to create my own custom tabIcon / tabBarButton but I don't know how to pass in to the tabBarButton if the tab is active or not. The props &quot;focused&quot; or &quot;navigation&quot; are not passed into the tabBarButton function. I want my bottom nav to look like the picture here</p>
  <p><a href="https://i.stack.imgur.com/WncH3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/WncH3.png" alt="enter image description here" /></a></p>