title: react navigation tabBarIcon not showing despite the rest
body: <p>React native react-navigation tabBarIcon does not display despite others do
  here is the code</p>
  <pre><code>    import * as React from &quot;react&quot;;
      import { HomeStack, FlashStack, ProfileStack, TvStack } from &quot;./src/Routes&quot;;
      import { NavigationContainer } from &quot;@react-navigation/native&quot;;
      import { createBottomTabNavigator } from &quot;@react-navigation/bottom-tabs&quot;;
      import { AntDesign, Entypo, Feather } from &quot;@expo/vector-icons&quot;;
      
      export default function App() {
        const Tab = createBottomTabNavigator();
        return (
          &lt;NavigationContainer&gt;
            &lt;Tab.Navigator
              initialRouteName=&quot;HomeScreen&quot;
              screenOptions={{ headerShown: false }}
            &gt;
              &lt;Tab.Screen
                name=&quot;HomeScreen&quot;
                component={HomeStack}
                Options={{
                  tabBarIcon: ({ focused, color }) =&gt; (
                    &lt;AntDesign name=&quot;home&quot; size={focused ? 29 : 24} color={color} /&gt;
                  ),
                  tabBarLabel: &quot;Home&quot;,
                  tabBarActiveTintColor: &quot;blue&quot;,
                  tabBarInactiveTintColor: &quot;black&quot;,
                }}
              /&gt;
              &lt;Tab.Screen
                name=&quot;FlashTvScreen&quot;
                component={FlashStack}
                options={{
                  tabBarIcon: ({ focused, color }) =&gt; (
                    &lt;Entypo name=&quot;flash&quot; size={focused ? 29 : 24} color={color} /&gt;
                  ),
                  tabBarLabel: &quot;Flash Tv&quot;,
                  tabBarActiveTintColor: &quot;blue&quot;,
                  tabBarInactiveTintColor: &quot;black&quot;,
                }}
              /&gt;
              &lt;Tab.Screen
                name=&quot;TvScreen&quot;
                component={TvStack}
                options={{
                  tabBarIcon: ({ focused, color }) =&gt; (
                    &lt;Feather name=&quot;tv&quot; size={focused ? 29 : 24} color={color} /&gt;
                  ),
                  tabBarLabel: &quot;Tv&quot;,
                  tabBarActiveTintColor: &quot;blue&quot;,
                  tabBarInactiveTintColor: &quot;black&quot;,
                }}
              /&gt;
              &lt;Tab.Screen
                name=&quot;ProfileScreen&quot;
                component={ProfileStack}
                options={{
                  tabBarIcon: ({ focused, color }) =&gt; (
                    &lt;AntDesign name=&quot;user&quot; size={focused ? 29 : 24} color={color} /&gt;
                  ),
                  tabBarLabel: &quot;Profile&quot;,
                  tabBarActiveTintColor: &quot;blue&quot;,
                  tabBarInactiveTintColor: &quot;black&quot;,
                }}
              /&gt;
            &lt;/Tab.Navigator&gt;
          &lt;/NavigationContainer&gt;
        );
      }
  </code></pre>
  <p>package.json :</p>
  <pre><code>{
    &quot;main&quot;: &quot;node_modules/expo/AppEntry.js&quot;,
    &quot;scripts&quot;: {
      &quot;start&quot;: &quot;expo start&quot;,
      &quot;android&quot;: &quot;expo start --android&quot;,
      &quot;ios&quot;: &quot;expo start --ios&quot;,
      &quot;web&quot;: &quot;expo start --web&quot;,
      &quot;eject&quot;: &quot;expo eject&quot;
    },
    &quot;dependencies&quot;: {
      &quot;@react-navigation/bottom-tabs&quot;: &quot;^6.0.5&quot;,
      &quot;@react-navigation/native&quot;: &quot;^6.0.2&quot;,
      &quot;@react-navigation/stack&quot;: &quot;^6.0.7&quot;,
      &quot;expo&quot;: &quot;~42.0.1&quot;,
      &quot;expo-status-bar&quot;: &quot;~1.0.4&quot;,
      &quot;react&quot;: &quot;16.13.1&quot;,
      &quot;react-dom&quot;: &quot;16.13.1&quot;,
      &quot;react-native&quot;: &quot;https://github.com/expo/react-native/archive/sdk-42.0.0.tar.gz&quot;,
      &quot;react-native-web&quot;: &quot;~0.13.12&quot;,
      &quot;react-native-safe-area-context&quot;: &quot;3.2.0&quot;
    },
    &quot;devDependencies&quot;: {
      &quot;@babel/core&quot;: &quot;^7.9.0&quot;
    },
    &quot;private&quot;: true
  }
  
  </code></pre>
  <p><a href="https://i.stack.imgur.com/ygi2U.png" rel="nofollow noreferrer">image of HomeScreen icon not displaying</a></p>
  <p><a href="https://i.stack.imgur.com/DpfCy.png" rel="nofollow noreferrer">image of another screen icon displaying correctly </a></p>
  <p>i have tried everything but none of it worked
  any help would be appreciated</p>
  <p>note : i also noticed that every time i navigate to homeScreen the color becomes gray for unknown reason</p>