React Native Vector Icons Example

Hello friends, We’re back with an amazing tutorial of react native. Many of us heard about Vector Icons and does not know properly how to use them in react native. First of all some information about vector icons, Vector icons has one of the largest Icon library for developers to freely use. To use vector icons in react native application we have to use their official NPM package react-native-vector-icons. But before starting using this package we have to configure it properly for our project. So in this tutorial we would learn about React Native Vector Icons Example.

List of Icons category comes with React Native Vector Icons :-

AntDesign by AntFinance
Entypo by Daniel Bruce
EvilIcons by Alexander Madyankin & Roman Shamin
Feather by Cole Bemis & Contributors
FontAwesome by Dave Gandy
FontAwesome 5 by Fonticons
Fontisto by Kenan Gündoğan
Foundation by ZURB
Ionicons by Iconic Framework
MaterialIcons by Google
MaterialCommunityIcons by MaterialDesignIcons.com
Octicons by Github
Zocial by Sam Collins
SimpleLineIcons by Sabbir & Contributors

One more thing, If you want to see all of the ICONS then Visit here.

Contents in this project React Native Vector Icons Example :-

1. Configure React Native Vector Icons for Android :-

1. First of all we have to install the React Native Vector Icons package in our react native project. So open your project’s main Root directory in CMD and execute below command to install it.

<br />
npm install react-native-vector-icons –save

1	npm install react–native–vector–icons —save

Screenshot :-

Here you go now the package is successfully installed in your project.

2. Now it’s time to make changes in some internal project files. So Open Your_React_Native_Project -> android -> app -> build.gradle file and put below fonts.gradlew line inside it.

<br />
apply from: “../../node_modules/react-native-vector-icons/fonts.gradle”

1	apply from: “../../node_modules/react-native-vector-icons/fonts.gradle”

3. Now again we have to put below line in Your_React_Native_Project -> android -> app -> build.gradle file in dependencies block.

<br />
compile project(‘:react-native-vector-icons’)

1	compile project(‘:react-native-vector-icons’)

Source Code of My build.gradle file after adding above code :-

<br />
apply plugin: “com.android.application”</p>
<p>apply from: “../../node_modules/react-native-vector-icons/fonts.gradle”</p>
<p>import com.android.build.OutputFile</p>
<p>project.ext.react = [<br />
    enableHermes: false,  // clean and rebuild if changing<br />
]</p>
<p>apply from: “../../node_modules/react-native/react.gradle”</p>
<p>def enableSeparateBuildPerCPUArchitecture = false</p>
<p>def enableProguardInReleaseBuilds = false</p>
<p>def jscFlavor = ‘org.webkit:android-jsc:+’</p>
<p>def enableHermes = project.ext.react.get(“enableHermes”, false);</p>
<p>def nativeArchitectures = project.getProperties().get(“reactNativeDebugArchitectures”)</p>
<p>android {<br />
    ndkVersion rootProject.ext.ndkVersion</p>
<p>    compileSdkVersion rootProject.ext.compileSdkVersion</p>
<p>    defaultConfig {<br />
        applicationId “com.myapp”<br />
        minSdkVersion rootProject.ext.minSdkVersion<br />
        targetSdkVersion rootProject.ext.targetSdkVersion<br />
        versionCode 1<br />
        versionName “1.0”<br />
    }<br />
    splits {<br />
        abi {<br />
            reset()<br />
            enable enableSeparateBuildPerCPUArchitecture<br />
            universalApk false  // If true, also generate a universal APK<br />
            include “armeabi-v7a”, “x86”, “arm64-v8a”, “x86_64”<br />
        }<br />
    }<br />
    signingConfigs {<br />
        debug {<br />
            storeFile file(‘debug.keystore’)<br />
            storePassword ‘android’<br />
            keyAlias ‘androiddebugkey’<br />
            keyPassword ‘android’<br />
        }<br />
    }<br />
    buildTypes {<br />
        debug {<br />
            signingConfig signingConfigs.debug<br />
            if (nativeArchitectures) {<br />
                ndk {<br />
                    abiFilters nativeArchitectures.split(‘,’)<br />
                }<br />
            }<br />
        }<br />
        release {<br />
            signingConfig signingConfigs.debug<br />
            minifyEnabled enableProguardInReleaseBuilds<br />
            proguardFiles getDefaultProguardFile(“proguard-android.txt”), “proguard-rules.pro”<br />
        }<br />
    }</p>
<p>    // applicationVariants are e.g. debug, release<br />
    applicationVariants.all { variant -><br />
        variant.outputs.each { output -></p>
<p>            def versionCodes = [“armeabi-v7a”: 1, “x86”: 2, “arm64-v8a”: 3, “x86_64”: 4]<br />
            def abi = output.getFilter(OutputFile.ABI)<br />
            if (abi != null) {  // null for the universal-debug, universal-release variants<br />
                output.versionCodeOverride =<br />
                        defaultConfig.versionCode * 1000 + versionCodes.get(abi)<br />
            }</p>
<p>        }<br />
    }<br />
}</p>
<p>dependencies {<br />
    implementation fileTree(dir: “libs”, include: [“*.jar”])<br />
    //noinspection GradleDynamicVersion<br />
    implementation “com.facebook.react:react-native:+”  // From node_modules</p>
<p>    implementation “androidx.swiperefreshlayout:swiperefreshlayout:1.0.0”</p>
<p>    debugImplementation(“com.facebook.flipper:flipper:${FLIPPER_VERSION}”) {<br />
        exclude group:’com.facebook.fbjni’<br />
    }</p>
<p>    debugImplementation(“com.facebook.flipper:flipper-network-plugin:${FLIPPER_VERSION}”) {<br />
        exclude group:’com.facebook.flipper’<br />
        exclude group:’com.squareup.okhttp3′, module:’okhttp’<br />
    }</p>
<p>    debugImplementation(“com.facebook.flipper:flipper-fresco-plugin:${FLIPPER_VERSION}”) {<br />
        exclude group:’com.facebook.flipper’<br />
    }</p>
<p>    if (enableHermes) {<br />
        def hermesPath = “../../node_modules/hermes-engine/android/”;<br />
        debugImplementation files(hermesPath + “hermes-debug.aar”)<br />
        releaseImplementation files(hermesPath + “hermes-release.aar”)<br />
    } else {<br />
        implementation jscFlavor<br />
    }</p>
<p>    compile project(‘:react-native-vector-icons’)</p>
<p>}</p>
<p>task copyDownloadableDepsToLibs(type: Copy) {<br />
    from configurations.implementation<br />
    into ‘libs’<br />
}</p>
<p>apply from: file(“../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle”); applyNativeModulesAppBuildGradle(project)

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

apply plugin: “com.android.application”

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

import com.android.build.OutputFile

project.ext.react = [

enableHermes: false, // clean and rebuild if changing

]

apply from: “../../node_modules/react-native/react.gradle”

def enableSeparateBuildPerCPUArchitecture = false

def enableProguardInReleaseBuilds = false

def jscFlavor = ‘org.webkit:android-jsc:+’

def enableHermes = project.ext.react.get(“enableHermes”, false);

def nativeArchitectures = project.getProperties().get(“reactNativeDebugArchitectures”)

android {

ndkVersion rootProject.ext.ndkVersion

compileSdkVersion rootProject.ext.compileSdkVersion

defaultConfig {

applicationId “com.myapp”

minSdkVersion rootProject.ext.minSdkVersion

targetSdkVersion rootProject.ext.targetSdkVersion

versionCode 1

versionName “1.0”

}

splits {

abi {

reset()

enable enableSeparateBuildPerCPUArchitecture

universalApk false // If true, also generate a universal APK

include “armeabi-v7a”, “x86”, “arm64-v8a”, “x86_64”

}

signingConfigs {

debug {

storeFile file(‘debug.keystore’)

storePassword ‘android’

keyAlias ‘androiddebugkey’

keyPassword ‘android’

}

buildTypes {

debug {

signingConfig signingConfigs.debug

if (nativeArchitectures) {

ndk {

abiFilters nativeArchitectures.split(‘,’)

}

release {

signingConfig signingConfigs.debug

minifyEnabled enableProguardInReleaseBuilds

proguardFiles getDefaultProguardFile(“proguard-android.txt”), “proguard-rules.pro”

}

// applicationVariants are e.g. debug, release

applicationVariants.all { variant ->

variant.outputs.each { output ->

def versionCodes = [“armeabi-v7a”: 1, “x86”: 2, “arm64-v8a”: 3, “x86_64”: 4]

def abi = output.getFilter(OutputFile.ABI)

if (abi != null) { // null for the universal-debug, universal-release variants

output.versionCodeOverride =

defaultConfig.versionCode * 1000 + versionCodes.get(abi)

}

dependencies {

implementation fileTree(dir: “libs”, include: [“*.jar”])

//noinspection GradleDynamicVersion

implementation “com.facebook.react:react-native:+” // From node_modules

implementation “androidx.swiperefreshlayout:swiperefreshlayout:1.0.0”

debugImplementation(“com.facebook.flipper:flipper:${FLIPPER_VERSION}”) {

exclude group:‘com.facebook.fbjni’

}

debugImplementation(“com.facebook.flipper:flipper-network-plugin:${FLIPPER_VERSION}”) {

exclude group:‘com.facebook.flipper’

exclude group:‘com.squareup.okhttp3’, module:‘okhttp’

}

debugImplementation(“com.facebook.flipper:flipper-fresco-plugin:${FLIPPER_VERSION}”) {

exclude group:‘com.facebook.flipper’

}

if (enableHermes) {

def hermesPath = “../../node_modules/hermes-engine/android/”;

debugImplementation files(hermesPath + “hermes-debug.aar”)

releaseImplementation files(hermesPath + “hermes-release.aar”)

} else {

implementation jscFlavor

}

compile project(‘:react-native-vector-icons’)

}

task copyDownloadableDepsToLibs(type: Copy) {

from configurations.implementation

into ‘libs’

}

apply from: file(“../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle”); applyNativeModulesAppBuildGradle(project)

4. Now Open Your_React_Native_Project -> android -> settings.gradle file and put both below lines inside it.

<br />
include ‘:react-native-vector-icons’</p>
<p>project(‘:react-native-vector-icons’).projectDir = new File(rootProject.projectDir, ‘../node_modules/react-native-vector-icons/android’)

include ‘:react-native-vector-icons’

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

Source Code of My settings.gradle file after adding above code :-

<br />
rootProject.name = ‘myapp’<br />
apply from: file(“../node_modules/@react-native-community/cli-platform-android/native_modules.gradle”); applyNativeModulesSettingsGradle(settings)<br />
include ‘:app’</p>
<p>include ‘:react-native-vector-icons’</p>
<p>project(‘:react-native-vector-icons’).projectDir = new File(rootProject.projectDir, ‘../node_modules/react-native-vector-icons/android’)

rootProject.name = ‘myapp’

apply from: file(“../node_modules/@react-native-community/cli-platform-android/native_modules.gradle”); applyNativeModulesSettingsGradle(settings)

include ‘:app’

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 -> android -> app -> src -> main -> java-> com -> ProjectName -> MainApplication.java and Import below VectorIconsPackage.

<br />
import com.oblador.vectoricons.VectorIconsPackage;

1	import com.oblador.vectoricons.VectorIconsPackage;

Now we have to add below code inside List<ReactPackage> getPackages() block.

<br />
new VectorIconsPackage();

1	new VectorIconsPackage();

Source Code of My MainApplication.java file after adding above code :-

<br />
package com.myapp;</p>
<p>import android.app.Application;<br />
import android.content.Context;<br />
import com.facebook.react.PackageList;<br />
import com.facebook.react.ReactApplication;<br />
import com.facebook.react.ReactInstanceManager;<br />
import com.facebook.react.ReactNativeHost;<br />
import com.facebook.react.ReactPackage;<br />
import com.facebook.soloader.SoLoader;<br />
import java.lang.reflect.InvocationTargetException;<br />
import java.util.List;</p>
<p>import com.oblador.vectoricons.VectorIconsPackage;</p>
<p>public class MainApplication extends Application implements ReactApplication {</p>
<p>  private final ReactNativeHost mReactNativeHost =<br />
      new ReactNativeHost(this) {<br />
        @Override<br />
        public boolean getUseDeveloperSupport() {<br />
          return BuildConfig.DEBUG;<br />
        }</p>
<p>        @Override<br />
        protected List<ReactPackage> getPackages() {<br />
          @SuppressWarnings(“UnnecessaryLocalVariable”)<br />
          List<ReactPackage> packages = new PackageList(this).getPackages();<br />
          // Packages that cannot be autolinked yet can be added manually here, for example:<br />
          // packages.add(new MyReactNativePackage());</p>
<p>          new VectorIconsPackage();</p>
<p>          return packages;<br />
        }</p>
<p>        @Override<br />
        protected String getJSMainModuleName() {<br />
          return “index”;<br />
        }<br />
      };</p>
<p>  @Override<br />
  public ReactNativeHost getReactNativeHost() {<br />
    return mReactNativeHost;<br />
  }</p>
<p>  @Override<br />
  public void onCreate() {<br />
    super.onCreate();<br />
    SoLoader.init(this, /* native exopackage */ false);<br />
    initializeFlipper(this, getReactNativeHost().getReactInstanceManager());<br />
  }</p>
<p>  /**<br />
   * Loads Flipper in React Native templates. Call this in the onCreate method with something like<br />
   * initializeFlipper(this, getReactNativeHost().getReactInstanceManager());<br />
   *<br />
   * @param context<br />
   * @param reactInstanceManager<br />
   */<br />
  private static void initializeFlipper(<br />
      Context context, ReactInstanceManager reactInstanceManager) {<br />
    if (BuildConfig.DEBUG) {<br />
      try {<br />
        /*<br />
         We use reflection here to pick up the class that initializes Flipper,<br />
        since Flipper library is not available in release mode<br />
        */<br />
        Class<?> aClass = Class.forName(“com.myapp.ReactNativeFlipper”);<br />
        aClass<br />
            .getMethod(“initializeFlipper”, Context.class, ReactInstanceManager.class)<br />
            .invoke(null, context, reactInstanceManager);<br />
      } catch (ClassNotFoundException e) {<br />
        e.printStackTrace();<br />
      } catch (NoSuchMethodException e) {<br />
        e.printStackTrace();<br />
      } catch (IllegalAccessException e) {<br />
        e.printStackTrace();<br />
      } catch (InvocationTargetException e) {<br />
        e.printStackTrace();<br />
      }<br />
    }<br />
  }<br />
}

package com.myapp;

import android.app.Application;

import android.content.Context;

import com.facebook.react.PackageList;

import com.facebook.react.ReactApplication;

import com.facebook.react.ReactInstanceManager;

import com.facebook.react.ReactNativeHost;

import com.facebook.react.ReactPackage;

import com.facebook.soloader.SoLoader;

import java.lang.reflect.InvocationTargetException;

import java.util.List;

import com.oblador.vectoricons.VectorIconsPackage;

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() {

@SuppressWarnings(“UnnecessaryLocalVariable”)

List<ReactPackage> packages = new PackageList(this).getPackages();

// Packages that cannot be autolinked yet can be added manually here, for example:

// packages.add(new MyReactNativePackage());

new VectorIconsPackage();

return packages;

}

@Override

protected String getJSMainModuleName() {

return “index”;

}

};

@Override

public ReactNativeHost getReactNativeHost() {

return mReactNativeHost;

}

@Override

public void onCreate() {

super.onCreate();

SoLoader.init(this, /* native exopackage */ false);

initializeFlipper(this, getReactNativeHost().getReactInstanceManager());

}

/**

* Loads Flipper in React Native templates. Call this in the onCreate method with something like

* initializeFlipper(this, getReactNativeHost().getReactInstanceManager());

* @param context

* @param reactInstanceManager

private static void initializeFlipper(

Context context, ReactInstanceManager reactInstanceManager) {

if (BuildConfig.DEBUG) {

try {

We use reflection here to pick up the class that initializes Flipper,

since Flipper library is not available in release mode

Class<?> aClass = Class.forName(“com.myapp.ReactNativeFlipper”);

aClass

.getMethod(“initializeFlipper”, Context.class, ReactInstanceManager.class)

.invoke(null, context, reactInstanceManager);

} catch (ClassNotFoundException e) {

e.printStackTrace();

} catch (NoSuchMethodException e) {

e.printStackTrace();

} catch (IllegalAccessException e) {

e.printStackTrace();

} catch (InvocationTargetException e) {

e.printStackTrace();

}

6. Now in the final step all we have to do is clean our previously build Gradlew file and rebuilt it again. So go to your project’s main Root directory and execute below command to rebuild the gradlew again.

<br />
cd android && gradlew clean && cd..

1	cd android && gradlew clean && cd..

Now you are good to go in android with react native vector icons.

2. Configure React Native Vector Icons for iOS :-

1. First we have to install the vector icons package in our react native iOS project. So open your project’s main Root location in Terminal and execute below command.

<br />
npm install react-native-vector-icons –save

1	npm install react–native–vector–icons —save

2. Now we have to Install PODS and link the project to vector icons package.

<br />
cd ios && pod install && cd ..

1	cd ios && pod install && cd ..

3. Now we have to manually add all of the ICONS ttf file in project’s main info.plist file. So open Your_React_Native_Project -> ios -> Your_Project -> info.plist file and add below code.

<br />
<key>UIAppFonts</key><br />
<array><br />
  <string>AntDesign.ttf</string><br />
  <string>Entypo.ttf</string><br />
  <string>EvilIcons.ttf</string><br />
  <string>Feather.ttf</string><br />
  <string>FontAwesome.ttf</string><br />
  <string>FontAwesome5_Brands.ttf</string><br />
  <string>FontAwesome5_Regular.ttf</string><br />
  <string>FontAwesome5_Solid.ttf</string><br />
  <string>Foundation.ttf</string><br />
  <string>Ionicons.ttf</string><br />
  <string>MaterialIcons.ttf</string><br />
  <string>MaterialCommunityIcons.ttf</string><br />
  <string>SimpleLineIcons.ttf</string><br />
  <string>Octicons.ttf</string><br />
  <string>Zocial.ttf</string><br />
</array>

<key>UIAppFonts</key>

<array>

<string>AntDesign.ttf</string>

<string>Entypo.ttf</string>

<string>EvilIcons.ttf</string>

<string>Feather.ttf</string>

<string>FontAwesome.ttf</string>

<string>FontAwesome5_Brands.ttf</string>

<string>FontAwesome5_Regular.ttf</string>

<string>FontAwesome5_Solid.ttf</string>

<string>Foundation.ttf</string>

<string>Ionicons.ttf</string>

<string>MaterialIcons.ttf</string>

<string>MaterialCommunityIcons.ttf</string>

<string>SimpleLineIcons.ttf</string>

<string>Octicons.ttf</string>

<string>Zocial.ttf</string>

</array>

Source Code of My info.plist file after adding above code :-

<br />
<?xml version=”1.0″ encoding=”UTF-8″?><br />
<!DOCTYPE plist PUBLIC “-//Apple//DTD PLIST 1.0//EN” “http://apple.com/DTDs/PropertyList-1.0.dtd”><br />
<plist version=”1.0″><br />
<dict><br />
	<key>CFBundleDevelopmentRegion</key><br />
	<string>en</string><br />
	<key>CFBundleDisplayName</key><br />
	<string>projectApp</string><br />
	<key>CFBundleExecutable</key><br />
	<string>$(EXECUTABLE_NAME)</string><br />
	<key>CFBundleIdentifier</key><br />
	<string>$(PRODUCT_BUNDLE_IDENTIFIER)</string><br />
	<key>CFBundleInfoDictionaryVersion</key><br />
	<string>6.0</string><br />
	<key>CFBundleName</key><br />
	<string>$(PRODUCT_NAME)</string><br />
	<key>CFBundlePackageType</key><br />
	<string>APPL</string><br />
	<key>CFBundleShortVersionString</key><br />
	<string>1.0</string><br />
	<key>CFBundleSignature</key><br />
	<string>????</string><br />
	<key>CFBundleVersion</key><br />
	<string>1</string><br />
	<key>LSRequiresIPhoneOS</key><br />
	<true/><br />
	<key>NSAppTransportSecurity</key><br />
	<dict><br />
		<key>NSExceptionDomains</key><br />
		<dict><br />
			<key>localhost</key><br />
			<dict><br />
				<key>NSExceptionAllowsInsecureHTTPLoads</key><br />
				<true/><br />
			</dict><br />
		</dict><br />
	</dict><br />
	<key>NSLocationWhenInUseUsageDescription</key><br />
	<string></string><br />
	<key>UILaunchStoryboardName</key><br />
	<string>LaunchScreen</string><br />
	<key>UIRequiredDeviceCapabilities</key><br />
	<array><br />
		<string>armv7</string><br />
	</array><br />
	<key>UISupportedInterfaceOrientations</key><br />
	<array><br />
		<string>UIInterfaceOrientationPortrait</string><br />
		<string>UIInterfaceOrientationLandscapeLeft</string><br />
		<string>UIInterfaceOrientationLandscapeRight</string><br />
	</array><br />
	<key>UIViewControllerBasedStatusBarAppearance</key><br />
	<false/></p>
<p>	<key>UIAppFonts</key><br />
<array><br />
  <string>AntDesign.ttf</string><br />
  <string>Entypo.ttf</string><br />
  <string>EvilIcons.ttf</string><br />
  <string>Feather.ttf</string><br />
  <string>FontAwesome.ttf</string><br />
  <string>FontAwesome5_Brands.ttf</string><br />
  <string>FontAwesome5_Regular.ttf</string><br />
  <string>FontAwesome5_Solid.ttf</string><br />
  <string>Foundation.ttf</string><br />
  <string>Ionicons.ttf</string><br />
  <string>MaterialIcons.ttf</string><br />
  <string>MaterialCommunityIcons.ttf</string><br />
  <string>SimpleLineIcons.ttf</string><br />
  <string>Octicons.ttf</string><br />
  <string>Zocial.ttf</string><br />
</array><br />
</dict><br />
</plist>

<?xml version=“1.0” encoding=“UTF-8”?>

<!DOCTYPE plist PUBLIC “-//Apple//DTD PLIST 1.0//EN” “http://apple.com/DTDs/PropertyList-1.0.dtd”>

<dict>

<key>CFBundleDevelopmentRegion</key>

<key>CFBundleDisplayName</key>

<string>projectApp</string>

<key>CFBundleExecutable</key>

<string>$(EXECUTABLE_NAME)</string>

<key>CFBundleIdentifier</key>

<string>$(PRODUCT_BUNDLE_IDENTIFIER)</string>

<key>CFBundleInfoDictionaryVersion</key>

<key>CFBundleName</key>

<string>$(PRODUCT_NAME)</string>

<key>CFBundlePackageType</key>

<key>CFBundleShortVersionString</key>

<key>CFBundleSignature</key>

<key>CFBundleVersion</key>

<key>LSRequiresIPhoneOS</key>

<true/>

<key>NSAppTransportSecurity</key>

<dict>

<key>NSExceptionDomains</key>

<dict>

<key>localhost</key>

<dict>

<key>NSExceptionAllowsInsecureHTTPLoads</key>

<true/>

</dict>

<key>NSLocationWhenInUseUsageDescription</key>

<key>UILaunchStoryboardName</key>

<string>LaunchScreen</string>

<key>UIRequiredDeviceCapabilities</key>

<array>

</array>

<key>UISupportedInterfaceOrientations</key>

<array>

<string>UIInterfaceOrientationPortrait</string>

<string>UIInterfaceOrientationLandscapeLeft</string>

<string>UIInterfaceOrientationLandscapeRight</string>

</array>

<key>UIViewControllerBasedStatusBarAppearance</key>

<key>UIAppFonts</key>

<array>

<string>AntDesign.ttf</string>

<string>Entypo.ttf</string>

<string>EvilIcons.ttf</string>

<string>Feather.ttf</string>

<string>FontAwesome.ttf</string>

<string>FontAwesome5_Brands.ttf</string>

<string>FontAwesome5_Regular.ttf</string>

<string>FontAwesome5_Solid.ttf</string>

<string>Foundation.ttf</string>

<string>Ionicons.ttf</string>

<string>MaterialIcons.ttf</string>

<string>MaterialCommunityIcons.ttf</string>

<string>SimpleLineIcons.ttf</string>

<string>Octicons.ttf</string>

<string>Zocial.ttf</string>

</array>

</dict>

</plist>

Here you go friends. Now we are good to go in iOS also.

3. Start Coding for App :-

1. Open your project’s main App.js file and import StyleSheet, Text, Alert, TouchableOpacity and SafeAreaView component.

<br />
import React from ‘react’;</p>
<p>import { StyleSheet, Text, Alert, TouchableOpacity, SafeAreaView } from ‘react-native’;

import React from ‘react’;

import { StyleSheet, Text, Alert, TouchableOpacity, SafeAreaView } from ‘react-native’;

2. Import Icon component from FontAwesome icons in the package. I’m also mentioning all the icons combos. You can Visit their page from here and see all the List of Icons they have.

<br />
import Icon from ‘react-native-vector-icons/FontAwesome’;<br />
// import Icon from ‘react-native-vector-icons/AntDesign’;<br />
// import Icon from ‘react-native-vector-icons/Entypo’;<br />
// import Icon from ‘react-native-vector-icons/EvilIcons’;<br />
// import Icon from ‘react-native-vector-icons/Feather’;<br />
// import Icon from ‘react-native-vector-icons/FontAwesome 5’;<br />
// import Icon from ‘react-native-vector-icons/Foundation’;<br />
// import Icon from ‘react-native-vector-icons/Ionicons’;<br />
// import Icon from ‘react-native-vector-icons/MaterialIcons’;<br />
// import Icon from ‘react-native-vector-icons/MaterialCommunityIcons’;<br />
// import Icon from ‘react-native-vector-icons/Octicons’;<br />
// import Icon from ‘react-native-vector-icons/Zocial’;<br />
// import Icon from ‘react-native-vector-icons/SimpleLineIcons’;

import Icon from ‘react-native-vector-icons/FontAwesome’;

// import Icon from ‘react-native-vector-icons/AntDesign’;

// import Icon from ‘react-native-vector-icons/Entypo’;

// import Icon from ‘react-native-vector-icons/EvilIcons’;

// import Icon from ‘react-native-vector-icons/Feather’;

// import Icon from ‘react-native-vector-icons/FontAwesome 5’;

// import Icon from ‘react-native-vector-icons/Foundation’;

// import Icon from ‘react-native-vector-icons/Ionicons’;

// import Icon from ‘react-native-vector-icons/MaterialIcons’;

// import Icon from ‘react-native-vector-icons/MaterialCommunityIcons’;

// import Icon from ‘react-native-vector-icons/Octicons’;

// import Icon from ‘react-native-vector-icons/Zocial’;

// import Icon from ‘react-native-vector-icons/SimpleLineIcons’;

3. Creating our main App component.

<br />
export default function App() {</p>
<p>}

export default function App() {

}

4. Creating a Constant named as facebook_button. In this component we would make a facebook login button using Icon.Button component.

<br />
  const facebook_button = (</p>
<p>    <Icon.Button<br />
      name=”facebook”<br />
      backgroundColor=”#3b5998″<br />
      size={21}<br />
      onPress={() => { Alert.alert(“Facebook Button Clicked”) }}></p>
<p>      <Text style={styles.buttonText}> Login with Facebook </Text></p>
<p>    </Icon.Button></p>
<p>  );

const facebook_button = (

<Icon.Button

name=“facebook”

backgroundColor=“#3b5998”

size={21}

onPress={() => { Alert.alert(“Facebook Button Clicked”) }}>

<Text style={styles.buttonText}> Login with Facebook </Text>

</Icon.Button>

);

Button Screenshot :-

5. Creating another constant component named as twitter_button.

<br />
  const twitter_button = (</p>
<p>    <Icon.Button<br />
      name=”twitter”<br />
      backgroundColor=”#51aaf0″<br />
      size={21}<br />
      onPress={() => { Alert.alert(“Twitter Button Clicked”) }}></p>
<p>      <Text style={styles.buttonText}> Follow Us on Twitter </Text></p>
<p>    </Icon.Button></p>
<p>  );

const twitter_button = (

<Icon.Button

name=“twitter”

backgroundColor=“#51aaf0”

size={21}

onPress={() => { Alert.alert(“Twitter Button Clicked”) }}>

<Text style={styles.buttonText}> Follow Us on Twitter </Text>

</Icon.Button>

);

6. Creating one more button component named as github_button.

<br />
  const github_button = (</p>
<p>    <Icon.Button<br />
      name=”github”<br />
      backgroundColor=”#CFD8DC”<br />
      iconStyle={{ color: ‘black’ }}<br />
      size={21}<br />
      onPress={() => { Alert.alert(“Github Button Clicked”) }}></p>
<p>      <Text style={{ fontFamily: ‘Arial’, fontSize: 15, color: ‘black’ }}> Follow Us on GitHub </Text></p>
<p>    </Icon.Button></p>
<p>  );

const github_button = (

<Icon.Button

name=“github”

backgroundColor=“#CFD8DC”

iconStyle={{ color: ‘black’ }}

size={21}

onPress={() => { Alert.alert(“Github Button Clicked”) }}>

<Text style={{ fontFamily: ‘Arial’, fontSize: 15, color: ‘black’ }}> Follow Us on GitHub </Text>

</Icon.Button>

);

Button Screenshot :-

7. We can also create indivijual icons using the Icon component. So we’re creating 5 types of Icon component.

<br />
const android_icon = (<br />
    <Icon<br />
      name=”android”<br />
      size={50}<br />
      color=”#007c00″<br />
      onPress={() => { Alert.alert(“Android Icon Clicked”) }}<br />
    /><br />
  );</p>
<p>  const music_icon = (<br />
    <Icon<br />
      name=”music”<br />
      size={50}<br />
      color=”#fb3742″<br />
      onPress={() => { Alert.alert(“Music Icon Clicked”) }}<br />
    /><br />
  );</p>
<p>  const heart_icon = (<br />
    <Icon<br />
      name=”heart”<br />
      size={50}<br />
      color=’red’<br />
      onPress={() => { Alert.alert(“Heart Icon Clicked”) }}<br />
    /><br />
  );</p>
<p>  const camera_icon = (<br />
    <Icon<br />
      name=”camera”<br />
      size={50}<br />
      color=”#006064″<br />
      onPress={() => { Alert.alert(“Camera Icon Clicked”) }}<br />
    /><br />
  );</p>
<p>  const github_icon = (<br />
    <Icon<br />
      name=”github”<br />
      size={50}<br />
      color=”#1B5E20″<br />
      onPress={() => { Alert.alert(“Github Icon Clicked”) }}<br />
    /><br />
  );

const android_icon = (

<Icon

name=“android”

size={50}

color=“#007c00”

onPress={() => { Alert.alert(“Android Icon Clicked”) }}

);

const music_icon = (

<Icon

name=“music”

size={50}

color=“#fb3742”

onPress={() => { Alert.alert(“Music Icon Clicked”) }}

);

const heart_icon = (

<Icon

name=“heart”

size={50}

color=‘red’

onPress={() => { Alert.alert(“Heart Icon Clicked”) }}

);

const camera_icon = (

<Icon

name=“camera”

size={50}

color=“#006064”

onPress={() => { Alert.alert(“Camera Icon Clicked”) }}

);

const github_icon = (

<Icon

name=“github”

size={50}

color=“#1B5E20”

onPress={() => { Alert.alert(“Github Icon Clicked”) }}

);

Screenshot of Icons :-

8. Creating return() block, Now we would call all aove defined constants in Touchable Opacity component.

<br />
  return (</p>
<p>    <SafeAreaView style={styles.MainContainer}></p>
<p>      <TouchableOpacity></p>
<p>        {facebook_button}</p>
<p>      </TouchableOpacity></p>
<p>      <TouchableOpacity style={{ marginTop: 10 }}></p>
<p>        {twitter_button}</p>
<p>      </TouchableOpacity></p>
<p>      <TouchableOpacity style={{ marginTop: 10 }}></p>
<p>        {github_button}</p>
<p>      </TouchableOpacity></p>
<p>      <TouchableOpacity style={{ marginTop: 10 }}></p>
<p>        {android_icon}</p>
<p>      </TouchableOpacity></p>
<p>      <TouchableOpacity style={{ marginTop: 10 }}></p>
<p>        {music_icon}</p>
<p>      </TouchableOpacity></p>
<p>      <TouchableOpacity style={{ marginTop: 10 }}></p>
<p>        {heart_icon}</p>
<p>      </TouchableOpacity></p>
<p>      <TouchableOpacity style={{ marginTop: 10 }}></p>
<p>        {camera_icon}</p>
<p>      </TouchableOpacity></p>
<p>      <TouchableOpacity style={{ marginTop: 10 }}></p>
<p>        {github_icon}</p>
<p>      </TouchableOpacity></p>
<p>    </SafeAreaView></p>
<p>  );

return (

{facebook_button}

</TouchableOpacity>

{twitter_button}

</TouchableOpacity>

{github_button}

</TouchableOpacity>

{android_icon}

</TouchableOpacity>

{music_icon}

</TouchableOpacity>

{heart_icon}

</TouchableOpacity>

{camera_icon}

</TouchableOpacity>

{github_icon}

</TouchableOpacity>

</SafeAreaView>

);

9. Creating Style.

<br />
const styles = StyleSheet.create({</p>
<p>  MainContainer: {<br />
    flex: 1,<br />
    justifyContent: ‘center’,<br />
    alignItems: ‘center’,<br />
  },</p>
<p>  buttonText: {<br />
    fontFamily: ‘Arial’,<br />
    fontSize: 15,<br />
    color: ‘#fff’<br />
  }</p>
<p>});

const styles = StyleSheet.create({

MainContainer: {

flex: 1,

justifyContent: ‘center’,

alignItems: ‘center’,

buttonText: {

fontFamily: ‘Arial’,

fontSize: 15,

color: ‘#fff’

}

});

10. Complete Source Code for App.js file :-

<br />
import React from ‘react’;</p>
<p>import { StyleSheet, Text, Alert, TouchableOpacity, SafeAreaView } from ‘react-native’;</p>
<p>import Icon from ‘react-native-vector-icons/FontAwesome’;<br />
// import Icon from ‘react-native-vector-icons/AntDesign’;<br />
// import Icon from ‘react-native-vector-icons/Entypo’;<br />
// import Icon from ‘react-native-vector-icons/EvilIcons’;<br />
// import Icon from ‘react-native-vector-icons/Feather’;<br />
// import Icon from ‘react-native-vector-icons/FontAwesome 5’;<br />
// import Icon from ‘react-native-vector-icons/Foundation’;<br />
// import Icon from ‘react-native-vector-icons/Ionicons’;<br />
// import Icon from ‘react-native-vector-icons/MaterialIcons’;<br />
// import Icon from ‘react-native-vector-icons/MaterialCommunityIcons’;<br />
// import Icon from ‘react-native-vector-icons/Octicons’;<br />
// import Icon from ‘react-native-vector-icons/Zocial’;<br />
// import Icon from ‘react-native-vector-icons/SimpleLineIcons’;</p>
<p>export default function App() {</p>
<p>  const facebook_button = (</p>
<p>    <Icon.Button<br />
      name=”facebook”<br />
      backgroundColor=”#3b5998″<br />
      size={21}<br />
      onPress={() => { Alert.alert(“Facebook Button Clicked”) }}></p>
<p>      <Text style={styles.buttonText}> Login with Facebook </Text></p>
<p>    </Icon.Button></p>
<p>  );</p>
<p>  const twitter_button = (</p>
<p>    <Icon.Button<br />
      name=”twitter”<br />
      backgroundColor=”#51aaf0″<br />
      size={21}<br />
      onPress={() => { Alert.alert(“Twitter Button Clicked”) }}></p>
<p>      <Text style={styles.buttonText}> Follow Us on Twitter </Text></p>
<p>    </Icon.Button></p>
<p>  );</p>
<p>  const github_button = (</p>
<p>    <Icon.Button<br />
      name=”github”<br />
      backgroundColor=”#CFD8DC”<br />
      iconStyle={{ color: ‘black’ }}<br />
      size={21}<br />
      onPress={() => { Alert.alert(“Github Button Clicked”) }}></p>
<p>      <Text style={{ fontFamily: ‘Arial’, fontSize: 15, color: ‘black’ }}> Follow Us on GitHub </Text></p>
<p>    </Icon.Button></p>
<p>  );</p>
<p>  const android_icon = (<br />
    <Icon<br />
      name=”android”<br />
      size={50}<br />
      color=”#007c00″<br />
      onPress={() => { Alert.alert(“Android Icon Clicked”) }}<br />
    /><br />
  );</p>
<p>  const music_icon = (<br />
    <Icon<br />
      name=”music”<br />
      size={50}<br />
      color=”#fb3742″<br />
      onPress={() => { Alert.alert(“Music Icon Clicked”) }}<br />
    /><br />
  );</p>
<p>  const heart_icon = (<br />
    <Icon<br />
      name=”heart”<br />
      size={50}<br />
      color=’red’<br />
      onPress={() => { Alert.alert(“Heart Icon Clicked”) }}<br />
    /><br />
  );</p>
<p>  const camera_icon = (<br />
    <Icon<br />
      name=”camera”<br />
      size={50}<br />
      color=”#006064″<br />
      onPress={() => { Alert.alert(“Camera Icon Clicked”) }}<br />
    /><br />
  );</p>
<p>  const github_icon = (<br />
    <Icon<br />
      name=”github”<br />
      size={50}<br />
      color=”#1B5E20″<br />
      onPress={() => { Alert.alert(“Github Icon Clicked”) }}<br />
    /><br />
  );</p>
<p>  return (</p>
<p>    <SafeAreaView style={styles.MainContainer}></p>
<p>      <TouchableOpacity></p>
<p>        {facebook_button}</p>
<p>      </TouchableOpacity></p>
<p>      <TouchableOpacity style={{ marginTop: 10 }}></p>
<p>        {twitter_button}</p>
<p>      </TouchableOpacity></p>
<p>      <TouchableOpacity style={{ marginTop: 10 }}></p>
<p>        {github_button}</p>
<p>      </TouchableOpacity></p>
<p>      <TouchableOpacity style={{ marginTop: 10 }}></p>
<p>        {android_icon}</p>
<p>      </TouchableOpacity></p>
<p>      <TouchableOpacity style={{ marginTop: 10 }}></p>
<p>        {music_icon}</p>
<p>      </TouchableOpacity></p>
<p>      <TouchableOpacity style={{ marginTop: 10 }}></p>
<p>        {heart_icon}</p>
<p>      </TouchableOpacity></p>
<p>      <TouchableOpacity style={{ marginTop: 10 }}></p>
<p>        {camera_icon}</p>
<p>      </TouchableOpacity></p>
<p>      <TouchableOpacity style={{ marginTop: 10 }}></p>
<p>        {github_icon}</p>
<p>      </TouchableOpacity></p>
<p>    </SafeAreaView></p>
<p>  );</p>
<p>}</p>
<p>const styles = StyleSheet.create({</p>
<p>  MainContainer: {<br />
    flex: 1,<br />
    justifyContent: ‘center’,<br />
    alignItems: ‘center’,<br />
  },</p>
<p>  buttonText: {<br />
    fontFamily: ‘Arial’,<br />
    fontSize: 15,<br />
    color: ‘#fff’<br />
  }</p>
<p>});

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

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

import React from ‘react’;

import { StyleSheet, Text, Alert, TouchableOpacity, SafeAreaView } from ‘react-native’;

import Icon from ‘react-native-vector-icons/FontAwesome’;

// import Icon from ‘react-native-vector-icons/AntDesign’;

// import Icon from ‘react-native-vector-icons/Entypo’;

// import Icon from ‘react-native-vector-icons/EvilIcons’;

// import Icon from ‘react-native-vector-icons/Feather’;

// import Icon from ‘react-native-vector-icons/FontAwesome 5’;

// import Icon from ‘react-native-vector-icons/Foundation’;

// import Icon from ‘react-native-vector-icons/Ionicons’;

// import Icon from ‘react-native-vector-icons/MaterialIcons’;

// import Icon from ‘react-native-vector-icons/MaterialCommunityIcons’;

// import Icon from ‘react-native-vector-icons/Octicons’;

// import Icon from ‘react-native-vector-icons/Zocial’;

// import Icon from ‘react-native-vector-icons/SimpleLineIcons’;

export default function App() {

const facebook_button = (

<Icon.Button

name=“facebook”

backgroundColor=“#3b5998”

size={21}

onPress={() => { Alert.alert(“Facebook Button Clicked”) }}>

<Text style={styles.buttonText}> Login with Facebook </Text>

</Icon.Button>

);

const twitter_button = (

<Icon.Button

name=“twitter”

backgroundColor=“#51aaf0”

size={21}

onPress={() => { Alert.alert(“Twitter Button Clicked”) }}>

<Text style={styles.buttonText}> Follow Us on Twitter </Text>

</Icon.Button>

);

const github_button = (

<Icon.Button

name=“github”

backgroundColor=“#CFD8DC”

iconStyle={{ color: ‘black’ }}

size={21}

onPress={() => { Alert.alert(“Github Button Clicked”) }}>

<Text style={{ fontFamily: ‘Arial’, fontSize: 15, color: ‘black’ }}> Follow Us on GitHub </Text>

</Icon.Button>

);

const android_icon = (

<Icon

name=“android”

size={50}

color=“#007c00”

onPress={() => { Alert.alert(“Android Icon Clicked”) }}

);

const music_icon = (

<Icon

name=“music”

size={50}

color=“#fb3742”

onPress={() => { Alert.alert(“Music Icon Clicked”) }}

);

const heart_icon = (

<Icon

name=“heart”

size={50}

color=‘red’

onPress={() => { Alert.alert(“Heart Icon Clicked”) }}

);

const camera_icon = (

<Icon

name=“camera”

size={50}

color=“#006064”

onPress={() => { Alert.alert(“Camera Icon Clicked”) }}

);

const github_icon = (

<Icon

name=“github”

size={50}

color=“#1B5E20”

onPress={() => { Alert.alert(“Github Icon Clicked”) }}

);

return (

{facebook_button}

</TouchableOpacity>

{twitter_button}

</TouchableOpacity>

{github_button}

</TouchableOpacity>

{android_icon}

</TouchableOpacity>

{music_icon}

</TouchableOpacity>

{heart_icon}

</TouchableOpacity>

{camera_icon}

</TouchableOpacity>

{github_icon}

</TouchableOpacity>

</SafeAreaView>

);

}

const styles = StyleSheet.create({

MainContainer: {

flex: 1,

justifyContent: ‘center’,

alignItems: ‘center’,

buttonText: {

fontFamily: ‘Arial’,

fontSize: 15,

color: ‘#fff’

}

});

Screenshots :-

React Native Vector Icons Example

Contents in this project React Native Vector Icons Example :-

Also Read :

Recent Posts

Search Here