How to Use React Native Vector Icons Library in Android iOS App Example Tutorial

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.

  1. AntDesign by AntFinance (297 icons)
  2. Entypo by Daniel Bruce (411 icons)
  3. EvilIcons by Alexander Madyankin & Roman Shamin (v1.10.1, 70 icons)
  4. Feather by Cole Bemis & Contributors (v4.7.0, 266 icons)
  5. FontAwesome by Dave Gandy (v4.7.0, 675 icons)
  6. FontAwesome 5 by Fonticons, Inc. (v5.3.1, 1341 (free) 3978 (pro) icons)
  7. Foundation by ZURB, Inc. (v3.0, 283 icons)
  8. Ionicons by Ben Sperry (v4.2.4, 696 icons)
  9. MaterialIcons by Google, Inc. (v3.0.1, 932 icons)
  10. MaterialCommunityIcons by MaterialDesignIcons.com (v2.8.94, 2894 icons)
  11. Octicons by Github, Inc. (v8.0.0, 177 icons)
  12. Zocial by Sam Collins (v1.0, 100 icons)
  13. 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.

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.

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.

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.

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.

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.

Complete source code of my MainApplication.java file :

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.

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.

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.

2. Import Icon module from react-native-vector-icons/FontAwesome module.

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:

  1. react-native-vector-icons/AntDesign
  2. react-native-vector-icons/Entypo
  3. react-native-vector-icons/EvilIcons
  4. react-native-vector-icons/Feather
  5. react-native-vector-icons/FontAwesome
  6. react-native-vector-icons/FontAwesome 5
  7. react-native-vector-icons/Foundation
  8. react-native-vector-icons/Ionicons
  9. react-native-vector-icons/MaterialIcons
  10. react-native-vector-icons/MaterialCommunityIcons
  11. react-native-vector-icons/Octicons
  12. react-native-vector-icons/Zocial
  13. 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 .

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.

5. Creating 5 Touchable Opacity component inside render’s return block and call the all 5 above constants inside them to show on screen.

6. Creating style.

7. Complete source code for App.js File :

Screenshot in Android device:

Use React Native Vector Icons LibraryScreenshot in iOS device:

2 Comments

  1. can you make tutorial about push notification ? using https://pusher.com/ or anything else about it please?
    thanks before for your tutorials

Leave a Reply

Your email address will not be published. Required fields are marked *