fbpx

Using Vector Icons in React Native App | Android Platform

In this tutorial, we are going to implement the vector icons into our React Native app. The people who are into programming must all have heard of vector icons. These vector icons form an essential component of any app. It gives an attractive and dynamic look to any mobile application. The application built using the vector icons stands at the whole different level with an appealing look and feel to the app. They give meaning to the app components without having to use the words. Hence, vector icons are an integral part of mobile applications.

Here in this tutorial, we are going to install the vector icons package into our React Native application. Then, we are going to configure the icon package to the app and then implement it on our app screen. We are going to use React Native version 0.61 which is the latest version in the market. The idea is to install the boilerplate react native application and then run it on the android emulator. Then, we are going to add the react-native-vector-icons package which provides us with different icon packages to use. Lastly, we are going to render icons from different icon packages on our app screen.

So, let’s get started, folks!

 

Setting up a boilerplate React Native App

In this step, we are going to set a React Native boilerplate project first. For that, we are going to use the React Native CLI. Now, to set up a boilerplate project, we need to run following command in our desired directory command prompt:

react-native init sampleIconProject

This is will set up the starter React Native project for you.

Now, we need to run this starter React Native project on our android simulator. For that, we need to navigate to the project directory in our command prompt and then run the following command:

>>>react-native start     //for the metro bundler server

Now in different command prompt window, we need to run:

react-native run-android

Now, our started react native app will run on the android emulator.

Note that we may need to launch the emulator first before running the commands.

As a result, we get the following screen in our android emulator:

Now, we need to install the icons package.

 

Installing and configuring Vector Icons Package

Here, we are going to install the vector icons package. For that, we are going to make us of the react-native-vector-icons package provided by Obrador. This vector icons package provides highly customizable icons for React Native with support for NavBar, TabBar, ToolbarAndroid, Image source, and full styling. The icons provided are perfect for buttons, logos and navbars. The icons are easy to extend, style and integrate into your project as a component. This package contains icons from different icon bundles such as Ionicons, FontAwesome, material design, etc as shown in the screenshot below:

vector icon bundle

We can choose from any icon bundle to use in our React Native application. You can also search for different icons as required from oblador.github.io.

Installing the package

Now, we need to install the react-native-vector-icons package. For that, we need to run the following command into our project directory:

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

After the installation is successful, we need to link the package to our React Native app using the following command:

>>>react-native link 
          OR
>>>react-native link react-native-vector-icons

In the latest React Native version, there is a feature of auto-linking. So, this linking command may not be required. But it will not hurt if we do it just in case. However, if the react-native version is less than 0.60, this linking command is a must.

Now, we have successfully linked the icons package to our React Native. Now, its time to use them into our app screen.

 

 

Using Vector Icons in App Screen

Here, we are going to integrate the vector icons from any icon bundle into our app screen. But first, we need to import the package into our App.js file.

Importing Package

Now, we are going to import the react-native-vector-icons package into our App.js file. For that, we need to use the code from the following code snippet:

import Icon from 'react-native-vector-icons/FontAwesome5';

Here, we have imported the vector icons package with FontAwesome5 icon bundle. The icons can be now be integrated into render() method of App.js using the Icon component.

Integrating icon on the screen

Now, we are going to put the icon on our starter screen by using the Icon component in the render() method of App.js. In render() method, we already have the code for the starter React Native template. Now, we are going to add some icons to them as shown in the code snippet below:

render() {
    return (
        <SafeAreaView>
          <ScrollView
            contentInsetAdjustmentBehavior="automatic"
            style={styles.scrollView}>
            <Header />
            {global.HermesInternal == null ? null : (
              <View style={styles.engine}>
                <Text style={styles.footer}>Engine: Hermes</Text>
              </View>
            )}
            <View style={styles.body}>
              <View style={styles.sectionContainer}>

              <View style={{flex : 1, flexDirection: 'row', justifyContent :'center'}}>         
                <Icon name="shopping-basket" size={40} color="#900" />                        //Icon here
              </View>

                <Text style={styles.sectionTitle}>Step One</Text>
                <Text style={styles.sectionDescription}>
                  Edit <Text style={styles.highlight}>App.js</Text> to change this
                  screen and then come back to see your edits.
                </Text>
              </View>
              <View style={styles.sectionContainer}>
                <Text style={styles.sectionTitle}>See Your Changes</Text>
                <Text style={styles.sectionDescription}>
                  <ReloadInstructions />
                </Text>
              </View>
              <View style={styles.sectionContainer}>
                <Text style={styles.sectionTitle}>Debug</Text>
                <Text style={styles.sectionDescription}>
                  <DebugInstructions />
                </Text>
              </View>
              <View style={styles.sectionContainer}>
                <Text style={styles.sectionTitle}>Learn More</Text>
                <Text style={styles.sectionDescription}>
                  Read the docs to discover what to do next:
                </Text>
              </View>
              <LearnMoreLinks />
            </View>
          </ScrollView>
        </SafeAreaView>
    );
  }
}

Here, we have added the View component that wraps the Icon component. The Icon component includes some props like name, size, and color.

  • name prop is for the name of the icon that we are using from the icon bundle.
  • size is for the size of the icon.
  • color is for the desired color of the icon.

Hence, we get the following result in our app screen:

As we can see, we have got the ‘basket’ icon on the screen. Therefore, we have successfully added a vector icon into our React Native on the Android platform.

Likewise, you can import the icons from different icon bundles and use the as shown in the code snippet below:

import FontAwesome5 from 'react-native-vector-icons/FontAwesome5';
import Ionicons from 'react-native-vector-icons/Ionicons';

Now, render the icons as shown in the code snippet below:

<View style={{flex : 1, flexDirection: 'row', justifyContent :'center'}}>
  <FontAwesome5 name="shopping-basket" size={40} color="#900" />
</View>
<View style={{flex : 1, flexDirection: 'row', justifyContent :'center'}}>
  <Ionicons name="md-basket" size={40} color="#000" />
</View>

Hence, we get the following result in the android emulator:

Finally, we have successfully implemented the Vector Icons in the Android platform of the React Native app.

for make work in both platform

many time some icon name work only iOS or Android for make work both we using Platform component to decide what we show

  <Icon
  name={Platform.OS == 'ios' ? 'md-person':'md-people' }
  type="ionicon"
  color="rgba(110, 120, 170, 1)"
  size={25}
/>

here some result

Conclusion

In this tutorial is we learned how to set up and use the vector icons in the Android platform of React Native app. First, we learned how to set up the starter React Native app using React Native CLI. Then, we got step by step guide on how to install and use the react-native-vector-icons package into our React Native app. Lastly, we also got insight on using icons from multiple icon bundles.

1 thought on “Using Vector Icons in React Native App | Android Platform”

Leave a Comment