React Native Vector Icons is one of the most popular custom icons NPM GitHub library available on internet. It has more than 3K(3000) icons collection in it and they all are free for any purpose. These icons comes with fully customization like icon color, icon size and also support multiple styling. So in this tutorial we would going to Use React Native Vector Icons Library in Android iOS React Native App Example Tutorial. So let’s get started .
List of Icons category available in React Native Vector Icons: You can also brows all the icons from here.
- AntDesign by AntFinance (297 icons)
- Entypo by Daniel Bruce (411 icons)
- EvilIcons by Alexander Madyankin & Roman Shamin (v1.10.1, 70 icons)
- Feather by Cole Bemis & Contributors (v4.7.0, 266 icons)
- FontAwesome by Dave Gandy (v4.7.0, 675 icons)
- FontAwesome 5 by Fonticons, Inc. (v5.3.1, 1341 (free) 3978 (pro) icons)
- Foundation by ZURB, Inc. (v3.0, 283 icons)
- Ionicons by Ben Sperry (v4.2.4, 696 icons)
- MaterialIcons by Google, Inc. (v3.0.1, 932 icons)
- MaterialCommunityIcons by MaterialDesignIcons.com (v2.8.94, 2894 icons)
- Octicons by Github, Inc. (v8.0.0, 177 icons)
- Zocial by Sam Collins (v1.0, 100 icons)
- SimpleLineIcons by Sabbir & Contributors (v2.4.1, 189 icons)
Contents in this project Use React Native Vector Icons Library in React Native Android iOS App Example Tutorial:
1. Configure React Native Vector Icons for Android Devices:
1. Open your react native project folder in command prompt/Terminal and execute below command.
|
1
|
npm install react–native–vector–icons —save
|
Screenshot of CMD:
Screenshot after successfully executing above command:
2. Open Your_React_Native_Project_Folder -> android -> app -> build.gradle file and put below code of line inside it.
|
1
|
apply from: “../../node_modules/react-native-vector-icons/fonts.gradle”
|
3. Again open the Your_React_Native_Project_Folder -> android -> app -> build.gradle file and put the
compile project(‘:react-native-vector-icons’) inside the dependencies block.
Code of my build.gradle file after adding above both line of codes: It will help you to understand where to put both of these code.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
|
apply plugin: “com.android.application”
apply from: “../../node_modules/react-native-vector-icons/fonts.gradle”
import com.android.build.OutputFile
/**
* The react.gradle file registers a task for each build variant (e.g. bundleDebugJsAndAssets
* and bundleReleaseJsAndAssets).
* These basically call `react-native bundle` with the correct arguments during the Android build
* cycle. By default, bundleDebugJsAndAssets is skipped, as in debug/dev mode we prefer to load the
* bundle directly from the development server. Below you can see all the possible configurations
* and their defaults. If you decide to add a configuration block, make sure to add it before the
* `apply from: “../../node_modules/react-native/react.gradle”` line.
*
* project.ext.react = [
* // the name of the generated asset file containing your JS bundle
* bundleAssetName: “index.android.bundle”,
*
* // the entry file for bundle generation
* entryFile: “index.android.js”,
*
* // whether to bundle JS and assets in debug mode
* bundleInDebug: false,
*
* // whether to bundle JS and assets in release mode
* bundleInRelease: true,
*
* // whether to bundle JS and assets in another build variant (if configured).
* // See http://tools.android.com/tech-docs/new-build-system/user-guide#TOC-Build-Variants
* // The configuration property can be in the following formats
* // ‘bundleIn${productFlavor}${buildType}’
* // ‘bundleIn${buildType}’
* // bundleInFreeDebug: true,
* // bundleInPaidRelease: true,
* // bundleInBeta: true,
*
* // whether to disable dev mode in custom build variants (by default only disabled in release)
* // for example: to disable dev mode in the staging build type (if configured)
* devDisabledInStaging: true,
* // The configuration property can be in the following formats
* // ‘devDisabledIn${productFlavor}${buildType}’
* // ‘devDisabledIn${buildType}’
*
* // the root of your project, i.e. where “package.json” lives
* root: “../../”,
*
* // where to put the JS bundle asset in debug mode
* jsBundleDirDebug: “$buildDir/intermediates/assets/debug”,
*
* // where to put the JS bundle asset in release mode
* jsBundleDirRelease: “$buildDir/intermediates/assets/release”,
*
* // where to put drawable resources / React Native assets, e.g. the ones you use via
* // require(‘./image.png’)), in debug mode
* resourcesDirDebug: “$buildDir/intermediates/res/merged/debug”,
*
* // where to put drawable resources / React Native assets, e.g. the ones you use via
* // require(‘./image.png’)), in release mode
* resourcesDirRelease: “$buildDir/intermediates/res/merged/release”,
*
* // by default the gradle tasks are skipped if none of the JS files or assets change; this means
* // that we don’t look at files in android/ or ios/ to determine whether the tasks are up to
* // date; if you have any other folders that you want to ignore for performance reasons (gradle
* // indexes the entire tree), add them here. Alternatively, if you have JS files in android/
* // for example, you might want to remove it from here.
* inputExcludes: [“android/**”, “ios/**”],
*
* // override which node gets called and with what additional arguments
* nodeExecutableAndArgs: [“node”],
*
* // supply additional arguments to the packager
* extraPackagerArgs: []
* ]
*/
project.ext.react = [
entryFile: “index.js”
]
apply from: “../../node_modules/react-native/react.gradle”
/**
* Set this to true to create two separate APKs instead of one:
* – An APK that only works on ARM devices
* – An APK that only works on x86 devices
* The advantage is the size of the APK is reduced by about 4MB.
* Upload all the APKs to the Play Store and people will download
* the correct one based on the CPU architecture of their device.
*/
def enableSeparateBuildPerCPUArchitecture = false
/**
* Run Proguard to shrink the Java bytecode in release builds.
*/
def enableProguardInReleaseBuilds = false
android {
compileSdkVersion rootProject.ext.compileSdkVersion
buildToolsVersion rootProject.ext.buildToolsVersion
defaultConfig {
applicationId “com.project”
minSdkVersion rootProject.ext.minSdkVersion
targetSdkVersion rootProject.ext.targetSdkVersion
versionCode 1
versionName “1.0”
ndk {
abiFilters “armeabi-v7a”, “x86”
}
}
splits {
abi {
reset()
enable enableSeparateBuildPerCPUArchitecture
universalApk false // If true, also generate a universal APK
include “armeabi-v7a”, “x86”
}
}
buildTypes {
release {
minifyEnabled enableProguardInReleaseBuilds
proguardFiles getDefaultProguardFile(“proguard-android.txt”), “proguard-rules.pro”
}
}
// applicationVariants are e.g. debug, release
applicationVariants.all { variant ->
variant.outputs.each { output ->
// For each separate APK per architecture, set a unique version code as described here:
// http://tools.android.com/tech-docs/new-build-system/user-guide/apk-splits
def versionCodes = [“armeabi-v7a”:1, “x86”:2]
def abi = output.getFilter(OutputFile.ABI)
if (abi != null) { // null for the universal-debug, universal-release variants
output.versionCodeOverride =
versionCodes.get(abi) * 1048576 + defaultConfig.versionCode
}
}
}
}
dependencies {
implementation fileTree(dir: “libs”, include: [“*.jar”])
implementation “com.android.support:appcompat-v7:${rootProject.ext.supportLibVersion}”
implementation “com.facebook.react:react-native:+” // From node_modules
compile project(‘:react-native-vector-icons’)
}
// Run this once to be able to run the application with BUCK
// puts all compile dependencies into folder libs for BUCK to use
task copyDownloadableDepsToLibs(type: Copy) {
from configurations.compile
into ‘libs’
}
|
4. Open Your_React_Native_Project_Folder -> android -> settings.gradle file and put the below line of code. This step ensures that now you can use these icons with Toolbar like Icon.getImageSource() function or using custom icons in the Icon.ToolbarAndroid() component.
|
1
2
3
|
include ‘:react-native-vector-icons’
project(‘:react-native-vector-icons’).projectDir = new File(rootProject.projectDir, ‘../node_modules/react-native-vector-icons/android’)
|
5. Open Your_React_Native_Project_Folder -> android -> app -> src -> main -> java-> com-> YourProjectName -> MainApplication.java file and import vector icons package using below line of code.
|
1
|
import com.oblador.vectoricons.VectorIconsPackage;
|
6. Again Open Your_React_Native_Project_Folder -> android -> app -> src -> main -> java-> com-> YourProjectName -> MainApplication.java file and call the react native vector icons below package name inside the return Arrays.<ReactPackage>asList() block.
|
1
|
new VectorIconsPackage()
|
Complete source code of my MainApplication.java file :
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
|
package com.project;
import android.app.Application;
import com.facebook.react.ReactApplication;
import com.facebook.react.ReactNativeHost;
import com.facebook.react.ReactPackage;
import com.facebook.react.shell.MainReactPackage;
import com.facebook.soloader.SoLoader;
import com.oblador.vectoricons.VectorIconsPackage;
import java.util.Arrays;
import java.util.List;
public class MainApplication extends Application implements ReactApplication {
private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
@Override
public boolean getUseDeveloperSupport() {
return BuildConfig.DEBUG;
}
@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),
new VectorIconsPackage()
);
}
@Override
protected String getJSMainModuleName() {
return “index”;
}
};
@Override
public ReactNativeHost getReactNativeHost() {
return mReactNativeHost;
}
@Override
public void onCreate() {
super.onCreate();
SoLoader.init(this, /* native exopackage */ false);
}
}
|
7. Now the last step is to Open your react native project folder in command prompt/Terminal and execute below link command. This command would refresh the complete react native project folder and index the newly installed react native vector icons library.
|
1
|
react–native link
|
Screenshot of CMD after executing above command:
Here you go now your android project is ready to use with react native vector icons library .
2. Configure React Native Vector Icons for iOS Devices:
1. Open your react native project folder in Terminal in MAC and execute below command to install the library.
|
1
|
$ npm install react–native–vector–icons —save
|
Screenshot of Terminal in MAC:
Screenshot of Terminal after executing above command:
2. After successfully installing the library we need to execute
react–native link react–native–vector–icons link command to link the complete project.
Here you go, Now there is no extra step is needed. Your react native iOS project is now ready for react native vector icons use .
3. Start Coding for App:
1. Import StyleSheet, View, Text, Alert and TouchableOpacity component in your project.
|
1
2
3
|
import React, {Component} from ‘react’;
import { StyleSheet, View, Text, Alert, TouchableOpacity } from ‘react-native’;
|
2. Import Icon module from react-native-vector-icons/FontAwesome module.
|
1
|
import Icon from ‘react-native-vector-icons/FontAwesome’;
|
Note: There are 13 types of icon category available in react-native-vector-icons library. I have mentioned there name earlier in this project. Now you can use them all at once in your project but you need to define their names with library name individually. For example:
- react-native-vector-icons/AntDesign
- react-native-vector-icons/Entypo
- react-native-vector-icons/EvilIcons
- react-native-vector-icons/Feather
- react-native-vector-icons/FontAwesome
- react-native-vector-icons/FontAwesome 5
- react-native-vector-icons/Foundation
- react-native-vector-icons/Ionicons
- react-native-vector-icons/MaterialIcons
- react-native-vector-icons/MaterialCommunityIcons
- react-native-vector-icons/Octicons
- react-native-vector-icons/Zocial
- react-native-vector-icons/SimpleLineIcons
You can use any icon category from above categories and import them in your project. I am using the FontAwesome library, To see the full icons list click here.
3. Creating 3 constant named as facebook_button, twitter_button and and google_plus_button inside the render’s block. We would call these constants directly into Touchable Opacity component.
name=” ” : In name prop we need pass the icon name which you can find on the ICON List.
backgroundColor=” “ : This prop is used to set the color of button.
size={} : Size of button.
onPress={} : Setting on ON Button Press event.
color : Color of Text and ICON .
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
const facebook_button = (
<Icon.Button name=“facebook” backgroundColor=“#3b5998” size={20} onPress={()=>{Alert.alert(“Facebook Button Clicked”)}}>
<Text style={{fontFamily: ‘Arial’, fontSize: 15, color: ‘#fff’}}>Login with Facebook</Text>
</Icon.Button>
);
const twitter_button = (
<Icon.Button name=“twitter” backgroundColor=“#51aaf0” size={20} onPress={()=>{Alert.alert(“Twitter Button Clicked”)}}>
<Text style={{fontFamily: ‘Arial’, fontSize: 15, color: ‘#fff’}}>Follow Us on Twitter</Text>
</Icon.Button>
);
const google_plus_button = (
<Icon.Button name=“google” backgroundColor=“#dc4335” size={20} onPress={()=>{Alert.alert(“Google Plus Button Clicked”)}}>
<Text style={{fontFamily: ‘Arial’, fontSize: 15, color: ‘#fff’}}>Login With Google+</Text>
</Icon.Button>
);
|
4. Now we would going show just icons for our use. So make 2 constant named as android_icon and music_icon inside render’s block.
name=”” : Pass the icon name here. You can find the icon names list here.
color=”” : Pass the #Color Code here , This would be the color of ICON.
|
1
2
3
4
5
6
7
8
9
10
11
|
const android_icon = (
<Icon name=“android” size={60} color=“#007c00” onPress={()=>{Alert.alert(“Android Icon Clicked”)}} />
);
const music_icon = (
<Icon name=“music” size={60} color=“#fb3742” onPress={()=>{Alert.alert(“Music Icon Clicked”)}} />
);
|
5. Creating 5 Touchable Opacity component inside render’s return block and call the all 5 above constants inside them to show on screen.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
|
render() {
const facebook_button = (
<Icon.Button name=“facebook” backgroundColor=“#3b5998” size={20} onPress={()=>{Alert.alert(“Facebook Button Clicked”)}}>
<Text style={{fontFamily: ‘Arial’, fontSize: 15, color: ‘#fff’}}>Login with Facebook</Text>
</Icon.Button>
);
const twitter_button = (
<Icon.Button name=“twitter” backgroundColor=“#51aaf0” size={20} onPress={()=>{Alert.alert(“Twitter Button Clicked”)}}>
<Text style={{fontFamily: ‘Arial’, fontSize: 15, color: ‘#fff’}}>Follow Us on Twitter</Text>
</Icon.Button>
);
const google_plus_button = (
<Icon.Button name=“google” backgroundColor=“#dc4335” size={20} onPress={()=>{Alert.alert(“Google Plus Button Clicked”)}}>
<Text style={{fontFamily: ‘Arial’, fontSize: 15, color: ‘#fff’}}>Login With Google+</Text>
</Icon.Button>
);
const android_icon = (
<Icon name=“android” size={60} color=“#007c00” onPress={()=>{Alert.alert(“Android Icon Clicked”)}} />
);
const music_icon = (
<Icon name=“music” size={60} color=“#fb3742” onPress={()=>{Alert.alert(“Music Icon Clicked”)}} />
);
return (
<View style={styles.MainContainer}>
<TouchableOpacity>
{facebook_button}
</TouchableOpacity>
<TouchableOpacity style={{marginTop: 10}}>
{twitter_button}
</TouchableOpacity>
<TouchableOpacity style={{marginTop: 10}}>
{google_plus_button}
</TouchableOpacity>
<TouchableOpacity style={{marginTop: 10}}>
{android_icon}
</TouchableOpacity>
<TouchableOpacity style={{marginTop: 10}}>
{music_icon}
</TouchableOpacity>
</View>
);
}
|
6. Creating style.
|
1
2
3
4
5
6
7
8
9
10
11
|
const styles = StyleSheet.create({
MainContainer: {
flex: 1,
justifyContent: ‘center’,
alignItems: ‘center’,
backgroundColor: ‘#F5FCFF’,
padding: 20
}
});
|
7. Complete source code for App.js File :
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
|
import React, {Component} from ‘react’;
import { StyleSheet, View, Text, Alert, TouchableOpacity } from ‘react-native’;
import Icon from ‘react-native-vector-icons/FontAwesome’;
export default class App extends Component{
render() {
const facebook_button = (
<Icon.Button name=“facebook” backgroundColor=“#3b5998” size={20} onPress={()=>{Alert.alert(“Facebook Button Clicked”)}}>
<Text style={{fontFamily: ‘Arial’, fontSize: 15, color: ‘#fff’}}>Login with Facebook</Text>
</Icon.Button>
);
const twitter_button = (
<Icon.Button name=“twitter” backgroundColor=“#51aaf0” size={20} onPress={()=>{Alert.alert(“Twitter Button Clicked”)}}>
<Text style={{fontFamily: ‘Arial’, fontSize: 15, color: ‘#fff’}}>Follow Us on Twitter</Text>
</Icon.Button>
);
const google_plus_button = (
<Icon.Button name=“google” backgroundColor=“#dc4335” size={20} onPress={()=>{Alert.alert(“Google Plus Button Clicked”)}}>
<Text style={{fontFamily: ‘Arial’, fontSize: 15, color: ‘#fff’}}>Login With Google+</Text>
</Icon.Button>
);
const android_icon = (
<Icon name=“android” size={60} color=“#007c00” onPress={()=>{Alert.alert(“Android Icon Clicked”)}} />
);
const music_icon = (
<Icon name=“music” size={60} color=“#fb3742” onPress={()=>{Alert.alert(“Music Icon Clicked”)}} />
);
return (
<View style={styles.MainContainer}>
<TouchableOpacity>
{facebook_button}
</TouchableOpacity>
<TouchableOpacity style={{marginTop: 10}}>
{twitter_button}
</TouchableOpacity>
<TouchableOpacity style={{marginTop: 10}}>
{google_plus_button}
</TouchableOpacity>
<TouchableOpacity style={{marginTop: 10}}>
{android_icon}
</TouchableOpacity>
<TouchableOpacity style={{marginTop: 10}}>
{music_icon}
</TouchableOpacity>
</View>
);
}
}
const styles = StyleSheet.create({
MainContainer: {
flex: 1,
justifyContent: ‘center’,
alignItems: ‘center’,
backgroundColor: ‘#F5FCFF’,
padding: 20
}
});
|
Screenshot in Android device:
Screenshot in iOS device:
Also Read :
React Native 0.60 Stable Version is launched-Learn About New Changes
React Native Show SVG Image from Online URL and Local Resource Android iOS Example Tutorial
React Native Open Specific App in Google Play Store from App in Android
React Native Get SHA1 MD5 Key Certificate using CMD Android Studio
React Native Integrate Mapbox in Android iOS Example Tutorial
