简体   繁体   中英

Why are my react icons not functioning properly?

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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM