Why My React Native Vector Icons Are Not Working?

Install react-native-vector-icons using running this command

npm install --save react-native-vector-icons

Then completed all of the setup from here. ( Ignore this step )

This error typically occurs when a component is provided that doesn’t match the expected type ( You expected to pass a component or string but instead passed something different ). In your situation, I think that the problem is with how you import components.

Try importing in the following way.

import Entypo from 'react-native-vector-icons/Entypo;

Instead of this way.

import {Entypo} from "react-native-vector-icons";

This approach has always been my preference. ~/Icons/index.tsx

import AntDesign from 'react-native-vector-icons/AntDesign'
import Entypo from 'react-native-vector-icons/Entypo'
import EvilIcons from 'react-native-vector-icons/EvilIcons'
import Feather from 'react-native-vector-icons/Feather'
import FontAwesome from 'react-native-vector-icons/FontAwesome'
import FontAwesome5 from 'react-native-vector-icons/FontAwesome5'
import FontAwesome5Pro from 'react-native-vector-icons/FontAwesome5Pro'
import Fontisto from 'react-native-vector-icons/Fontisto'
import Foundation from 'react-native-vector-icons/Foundation'
import Ionicons from 'react-native-vector-icons/Ionicons'
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons'
import MaterialIcons from 'react-native-vector-icons/MaterialIcons'
import Octicons from 'react-native-vector-icons/Octicons'
import SimpleLineIcons from 'react-native-vector-icons/SimpleLineIcons'
import Zocial from 'react-native-vector-icons/Zocial'


const Icons = {
AntDesign,
Entypo,
EvilIcons,
Feather,
FontAwesome,
FontAwesome5,
FontAwesome5Pro,
Fontisto,
Foundation,
Ionicons,
MaterialCommunityIcons,
MaterialIcons,
Octicons,
SimpleLineIcons,
Zocial,
}

export default Icons

Applying in any tsx file.

import Icons from './app/Icons';

return (
<>
   // ...
   <Icons.Entypo name="camera" size={24} color="black" style={icons1} /\>
</>
)