[SOLVED] ERROR Invariant Violation: TurboModuleRegistry.getEnforcing(...): 'VectorIcons' could not be found

ERROR Invariant Violation: TurboModuleRegistry.getEnforcing(...): 'VectorIcons' could not be found

I get an error telling me that:


 ERROR  Invariant Violation: TurboModuleRegistry.getEnforcing(...): 'VectorIcons' could not be found. Verify that a module by this name is registered in the native binary.Bridgeless mode: false. TurboModule interop: false. Modules loaded: {"NativeModules":["PlatformConstants","LogBox","Timing","AppState","SourceCode","BlobModule","WebSocketModule","DevSettings","DevToolsSettingsManager","Networking","Appearance","DevLoadingView","HeadlessJsTaskSupport","UIManager","DeviceInfo","ImageLoader","SoundManager","IntentAndroid","DeviceEventManager"],"TurboModules":[],"NotFound":["NativePerformanceCxx","NativePerformanceObserverCxx","RedBox","BugReporting","LinkingManager","VectorIcons"]}, js engine: hermes
 LOG  Running "ProjectName" with {"rootTag":11}
 ERROR  Invariant Violation: "ProjectName" has not been registered. This can happen if:
* Metro (the local dev server) is run from the wrong folder. Check if Metro is running, stop it and restart it in the current project.
* A module failed to load due to an error and `AppRegistry.registerComponent` wasn't called., js engine: hermes

I get this error only after trying to use MaterialIcons inside my project imported via import MaterialIcons from '@react-native-vector-icons/material-icons';

If i remove MaterialIcons component an error disappear.

My Index.js look like this:

/**
 * @format
 */

import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';

AppRegistry.registerComponent(appName, () => App);

I am using:

react-native-cli: 2.0.1
react-native: 0.74.2

I have tried to clear gradle inside android by running cd android && gradlew clean , i have tried to clear cache, restarting Metro by running npm start , all methods doesn't seem to work.

I also added this lines of codes in android/app/build.gladle:


project.ext.vectoricons = [
    iconFontNames: [ 'MaterialIcons.ttf' ] // Adjust as necessary for other icon fonts
]

apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

but doesn't seem to work at all

Solution

I figured out the problem long ago. Firstly, check if you have installed two react native vector icons library, like react-native-vector-icons and react-native-ionicons, this will conflicts each other.

Also check your Gradle version and make sure it's compatible to your modules.

Thirdly, copy all the fonts from Fonts inside react native vector icons, if you're using it as vector icons library and paste them to android/app/main/src/assets/fonts, the folder might not be there so create one.

And finally cd android and gradlew clean, after that run cd.. on your terminal to return to the main working directory and rebuild your project. This will work finely.

Sometimes cleaning gradlew and stopping it and restarting it solves the problem. Icons might not get displayed instantly, but when you follow the steps above, problem will be solved.