title: how can I change the text color if it focused?
body: <p>I want to change the text color if the current Label is active. How I make it?</p>
  <pre class="lang-js prettyprint-override"><code>import React from 'react';
  import { StyleSheet, View } from 'react-native';
  import { NavigationContainer } from '@react-navigation/native';
  import {
    BottomTabBar,
    createBottomTabNavigator,
  } from '@react-navigation/bottom-tabs';
  import { FontAwesome as Icon, Entypo as Icon2 } from '@expo/vector-icons';
  import { createStackNavigator } from '@react-navigation/stack';
  import { TabBarAdvancedButton } from '../components';
  import { EmptyScreen } from '../screens';
  import { IS_IPHONE_X } from '../utils';
  
  const BottomBar = createBottomTabNavigator();
  const Stack = createStackNavigator();
  
  type Props = {
    barColor: string,
  };
  
  export const TabBar: React.FC&lt;Props&gt; = ({ barColor }) =&gt; (
    &lt;NavigationContainer&gt;
      &lt;BottomBar.Navigator
        tabBar={(props) =&gt; (
          &lt;View style={styles.navigatorContainer}&gt;
            &lt;BottomTabBar {...props} /&gt;
            {IS_IPHONE_X &amp;&amp; (
              &lt;View
                style={[
                  styles.xFillLine,
                  {
                    backgroundColor: barColor,
                  },
                ]}
              /&gt;
            )}
          &lt;/View&gt;
        )}
        tabBarOptions={{
          style: styles.navigator,
          showLabel: true,
          labelStyle: {
            fontFamily: 'montserrat-regular',
            paddingBottom: 8,
            color: '#333',
          },
          tabStyle: {
            backgroundColor: barColor,
          },
        }}&gt;
        &lt;BottomBar.Screen
          name=&quot;Home&quot;
          component={EmptyScreen}
          options={{
            tabBarIcon: ({ color, focused }) =&gt; (
              &lt;Icon2 name=&quot;home&quot; size={28} color={focused ? '#C71FF7' : color} /&gt;
            ),
          }}
        /&gt;
        &lt;BottomBar.Screen
          name=&quot;Profile&quot;
          component={EmptyScreen}
          options={{
            tabBarIcon: ({ color, focused }) =&gt; (
              &lt;Icon name=&quot;user&quot; size={28} color={focused ? '#C71FF7' : color} /&gt;
            ),
          }}
        /&gt;
        &lt;BottomBar.Screen
          name=&quot;Rocket&quot;
          component={EmptyScreen}
          options={{
            tabBarButton: (props) =&gt; (
              &lt;TabBarAdvancedButton bgColor={barColor} {...props} /&gt;
            ),
          }}
        /&gt;
        &lt;BottomBar.Screen
          name=&quot;Messages&quot;
          component={EmptyScreen}
          options={{
            tabBarIcon: ({ color, focused }) =&gt; (
              &lt;Icon name=&quot;wechat&quot; size={28} color={focused ? '#C71FF7' : color} /&gt;
            ),
          }}
        /&gt;
        &lt;BottomBar.Screen
          name=&quot;Settings&quot;
          component={EmptyScreen}
          options={{
            tabBarIcon: ({ color, focused }) =&gt; (
              &lt;Icon name=&quot;gear&quot; size={28} color={focused ? '#C71FF7' : color} /&gt;
            ),
          }}
        /&gt;
      &lt;/BottomBar.Navigator&gt;
    &lt;/NavigationContainer&gt;
  );
  
  const styles = StyleSheet.create({
    container: {
      flex: 1,
    },
    navigatorContainer: {
      position: 'absolute',
      height: 60,
      bottom: 0,
      left: 0,
      right: 0,
      shadowColor: '#000',
      shadowOffset: {
        width: 0,
        height: 1,
      },
      shadowOpacity: 0.22,
      shadowRadius: 2.22,
    },
    navigator: {
      borderTopWidth: 0,
      backgroundColor: 'transparent',
      elevation: 30,
      height: 60,
    },
    xFillLine: {
      position: 'absolute',
      bottom: 0,
      left: 0,
      right: 0,
      height: 34,
    },
  });
  </code></pre>