How to resolve ':react-native-vector-icons' error for a successful build?

Question

I am trying to build my react-native app but I am getting an error:

• What went wrong: A problem occurred configuring project ':react-native-vector-icons'.

• Could not resolve all files for configuration ':react-native-vector-icons:classpath'.

• Could not find any matches for com.android.tools.build:gradle:2.3.+ as no versions of com.android.tools.build:gradle are available.

I have tried the following commands:

• npm install
• npm install npm -g
• npm rm --cached
• git clean -d -fx
• npm cache clean --force
• npm update
• npm upgrade
• npm audit fix
• npm install react-native-vector-icons --save

I have tried everything I can find on how to resolve this but I cannot get this error to go away. Does anyone know how to resolve this react-native-vector-icons build fail error?

Answer 1

You have to uninstall the react-native-vector-icons plugin first. Then, reinstall it. Just type:

$ npm uninstall react-native-vector-icons
$ npm install --save react-native-vector-icons

Answer 2

I had the same issue when I tried to add icons to my react native android project. I'll mention everything from the beginning. (Note: I am using VSCode in this part)

1. First follow the Official React Native documentation and try to run the app on your phone using USB.

2. Open the android folder using Android Studio which will automatically build the files correctly.

3. Use the following command to run the app on your android device.

   npx react-native run-android

At this point, the app should be working properly on your android device. Please do not continue to work on the icons if this part doesn't work yet.

4. Now to add the icons to react native. Install the following:

   npm install react-native-vector-icons --save

   npm install -D @types/react-native-vector-icons

5. Open android/app/build.gradle (not android/build.gradle) and enter the following at the top:

   import org.apache.tools.ant.taskdefs.condition.Os

6. Now enter this code inside the android block of the same file:

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

7. Enter this code inside the dependencies block of the same file:

   implementation 'com.google.android.material:material:1.5.0' // Replace 1.5.0 with the latest version

8. Now open this build.gradle file in Android Studio (open android/app/build.gradle, not android/build.gradle) and check somewhere if it says to Sync the changes or code and click on it.

9. Wait till the code is synced.

10. Kill the VScode terminal, open a new terminal in either powershell or CMD.

11. Run the following command to rebuild the app on your android phone.

    npx react-native run-android

12. If there are issues, try the following in powershell terminal:

    cd android ./gradlew clean cd ..

13. Rebuild the app again.

Here is my code for App.tsx if you need reference for the code.

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 */

import React from 'react';

import {
  SafeAreaView,
  StatusBar,
  StyleSheet,
  View,
} from 'react-native';

import { Colors } from 'react-native/Libraries/NewAppScreen';

import { Text } from './components/Text';
import Icon from 'react-native-vector-icons/FontAwesome';

function App(): JSX.Element {
  return (
    <SafeAreaView style={Colors.darker}>
      <StatusBar barStyle={'light-content'} backgroundColor={Colors.darker} />

      <View style={{ backgroundColor: Colors.black }}>
        <Icon.Button color="white" name="facebook">Login with Facebook</Icon.Button>
      </View>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
});

export default App;

Here is a page I referred to which helped me a lot: https://blog.logrocket.com/react-native-vector-icons-fonts-react-native-app-ui/

This is what I have done to enable icons in React Native and I do hope it has helped you :)