attached is the code below for a little app I am making with React Native. I was trying to use react icons but for some reason they are not working and idk why. I imported them and everything and they should be working but I keep getting this error. Does anyone know why my react icons are not functioning properly? Thanks in advance.
import { View, Text, SafeAreaView, Image } from 'react-native';
import React, { useLayoutEffect } from 'react';
import { useNavigation } from '@react-navigation/native';
import { FaBeer } from 'react-icons/fa';
const HomeScreen = () => {
const navigation = useNavigation();
useLayoutEffect(() => {
navigation.setOptions({
headerShown: false,
});
}, []);
return (
<SafeAreaView>
<Text className="text-red-500">
<View className="flex-row pb-3 items-center mx-4 space-x-2">
<Image
source={{
url:"https://links.papareact.com/wru",
}}
className="h-7 w-7 bg-gray-300 p-4 rounded-full"
/>
<View>
<Text className="font-bold text-gray-400 text-xs">
Deliver Now
</Text>
<Text className="font-bold text-xl">Current Location
<FaBeer />
</Text>
</View>
</View>
</Text>
</SafeAreaView>
);
};
export default HomeScreen;
react-icons doesn't work with react native (i think). You need to use react-native-vector-icons ( https://www.npmjs.com/package/react-native-vector-icons )
you cant use normal react icons since in react native icons can be either an image or can be SVG, so for SVG icons, you need to add react-native-svg
package.
You should install as @dev404 said https://github.com/oblador/react-native-vector-icons
Also do follow their installation process for both android and ios.
YOu can check the below available icon sets.
Hope it helps, feel free for doubts
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.