vector-icons react native code example

Example 1: react native vector icons not showing

add this in '/app/build.gradle'

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

Example 2: install react-native-vector-icons/ionicons

npm i react-native-vector-icons

Example 3: react native vector icons

1-npm install --save react-native-vector-icons
2-Edit android/app/build.gradle : (add below code)
    apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
3-Edit android/settings.gradle : (add below codes)
	+ include ':react-native-vector-icons'
	+ project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android')
4-Edit android/app/build.gradle : (add below code to dependencies)
    dependencies {
    ...
    compile project(':react-native-vector-icons')
}
5-import fontawesome to App.js :
import FontAwesome5 from 'react-native-vector-icons/FontAwesome5';

Example 4: icon shwoing a box react native vector icons

In 'android/app/build.gradle' (not in android/build.gradle),

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

Then,
react-native link react-native-vector-icons 
react-native run-android
react-native start

Example 5: react native vector icons

Following steps will help add vector icons to use in react-native cli
1-npm install --save react-native-vector-icons
2-Edit android/app/build.gradle : (add below code)
    apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
3-Edit android/app/build.gradle : (add below code to dependencies)
    dependencies {
    ...
    compile project(':react-native-vector-icons')
}
4-run following command from project root directory
npm install
5-start project again
6-run project in android with following command
npx react-native run-android

Example 6: react native vector icon

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

Tags:

Css Example