Why my react native vector icons are not working?-CodePudding

Why my react native vector icons are not working? I tried following every step in the react-native vector icons docs said but still, my icons are not working can anyone can help me how can I setup it up properly? i want to use a camera icon in my app so i tried this import { Entypo } from 'react-native-vector-icons'; and then \<Entypo name="camera" size={24} color="black" style={icons1} /\> but when it was giving me exports error I also tried to use import Icon from 'react-native-vector-icons/MaterialCommunityIcons'; and then \<Icon name="camera-outline" size={24} color="black" style={icons1}/\> but still the export errors due to it and when I remove those icons the error is gone,

is there any website where i can see all the react-native-vector-icons for react native cli app and also i can see the code snippet for usage?

i also added this in the android/settings.gradle file:

include ':react-native-vector-icons' project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android')

then added this in android/app/build.gradle:

dependencies {     ...     implementation project(':react-native-vector-icons') }

and lastly, I added this in MainApplication.java:

import com.oblador.vectoricons.VectorIconsPackage;

@Override
protected List<ReactPackage> getPackages() {
    return Arrays.<ReactPackage>asList(
    ...
    new VectorIconsPackage()
    );
}

CodePudding user response：

Frist thing

you can install vector icons using this npm

react-native-vector-icons

then done all the setup from here

then after you can import like this

import FontAwesome from 'react-native-vector-icons/FontAwesome';

many times vector icons [icons] do not work in our system
so you can use different icons in vector icons many different icons part in vector icon

here is Exmplae maybe this will help you

App.js

import React, { useState } from 'react';
import { Text, View, StyleSheet, Button } from 'react-native';
import FontAwesome from 'react-native-vector-icons/FontAwesome';

const App = () => {
  return (
    <View style={styles.container}>
      <FontAwesome name="rocket" size={30} color="#900" />
      <FontAwesome name="home" size={30} color="#b2b2b2" />
      <FontAwesome name="facebook" size={30} color="#900" />
      <FontAwesome name="google" size={30} color="#000" />
    </View>
  );
};

export default App;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 8,
    backgroundColor: 'white',
    justifyContent: 'center',
    alignItems: 'center',
  },
});

here is output