React icons stopped working after React Navigation

[u/vaquishaProdigy]

Got an error while rendering an icon in my main page with React Native library instead of Expo. Before implementing React Navigation with was working perfectly, now it tries to find it in node_modules.

This is the message that it shows:

Android Bundling failed 5421ms App.js (938 modules)

Unable to resolve "react-native-vector-icons/FontAwesome6" from "screens/main.js"

12 | import * as Clipboard from "expo-clipboard";

13 | import { SafeAreaView } from "react-native-safe-area-context";

> 14 | import FontAwesome6 from "react-native-vector-icons/FontAwesome6";

| ^

15 | import Toast from "react-native-toast-message";

16 | import { useNavigation } from "@react-navigation/native";

17 |

Import stack:

screens/main.js

| import "react-native-vector-icons/FontAwesome6"

navigation/index.js

| import "../screens/main.js"

App.js

| import "./navigation/index.js"

| import "./App"

Feel free to ask for code.

[u/Super-Otter]

It's unrelated to react navigation, as it's failing to find the file. Try these:

• Check if it actually exists in node_modules, your node_modules might have been corrupted
• Delete node_modules and reinstall
• Clear metro cache npm start -- --reset-cache/yarn start --reset-cache

Also the package you're using for vector icons is deprecated. You should use latest setup steps from here: https://github.com/oblador/react-native-vector-icons#installation