Icons are not displaying in the bottom tab. I've tried by putting different icons from different libraries. It is displaying the default cross box instead of all the icons.

import React from 'react'
import HomeScreen from './Screens/HomeScreen'
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { FontAwesome5,Entypo } from '@expo/vector-icons';
import MapScreen from './Screens/MapScreen';

import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons'

const Tab = createBottomTabNavigator();

const TabNavigator=()=>{
  return (
    <Tab.Navigator screenOptions={{
        tabBarShowLabel: true,
        headerShown:false,
        tabBarStyle:{backgroundColor:'#5B8C2A'},
        tabBarInactiveTintColor:"#A9A9A9",
        tabBarInactiveBackgroundColor:'',
        tabBarActiveTintColor:"white",
        tabBarActiveBackgroundColor:'#5B8C29',
        tabBarHideOnKeyboard:true

    }}>
      <Tab.Screen name="Home" component={HomeScreen} Options={{
          tabBarIcon:({size,color})=>(
            <MaterialCommunityIcons name="home" size={size} color={color} />
          ),
      }}/>
      <Tab.Screen name="Map" component={MapScreen} Options={{
          tabBarIcon:({size,color})=>(
            <Entypo name="globe" size={size} color={color} />
          )
      }}/>
   
      
    </Tab.Navigator>
  );
}

export default TabNavigator

Icons are not displaying in the bottom tab. I've tried by putting different icons from different libraries. It is displaying the default cross box instead of all the icons. Other than that everything is working. Even the navigation is perfectly working.

CodePudding user response：

It is not Options, but options, with lowercase.