oblador/react-native-vector-icons

Development Server returned resposne code 500 - for React Native 0.71

southbeach opened this issue · 3 comments

southbeach commented

MacOS Monterey 12.7.6

MacPro Late 2013 (aka trash mac)
I'm Testing on Android Simulator Pixel

I was forced to use 0.71 because i'm on an older system and I can't upgrade.
npx react-native@0.71 init MyProject --version 0.71

Description

I have verified that i have the following in the android/app/build.gradel
apply from: file("../../node_modules/react-native-vector-icons/fonts.gradle")
I'm not using monorepo, it is a standard react native project.

Error:

Error: Unable to resolve module react-native-vector-icons/Icon from /path/to/project/Application.tsx: react-native-vector-icons/Icon could not be found within the project or in these directories:
node_modules
3 | import { createNativeStackNavigator } from "@react-navigation/native-stack";
4 | import { Platform, TouchableOpacity } from "react-native";

5 | import { Icon } from "react-native-vector-icons/Icon";

Code:

<TouchableOpacity><Icon name="add" size={24} color="#007AFF" /></TouchableOpacity>)

Edit

I tried manually copying the fonts to src/assets/fonts directory and the app fails to compile on the Android

johnf commented

@southbeach Is that your exact code or an example. You need to import the Icon you want e.g.

import Icon from 'react-native-vector-icons/FontAwesome5';
southbeach commented

Thanks @johnf . This was helpful. I added FontAwesome5 import.

How and where do I find what name to use for the plus sign? I'm new to the icons.

<Text><Icon name="fa-plus" size={24} color="#007AFF" /></Text>

I searched fontawesome website https://fontawesome.com/v5/search?q=plus&o=r

johnf commented

@southbeach You can check https://oblador.github.io/react-native-vector-icons/ for all the icons we support.
I'd recommend using fontawesome6 if you want to use fontawesome.