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 :-

1. AntDesign by AntFinance
2. Entypo by Daniel Bruce
3. EvilIcons by Alexander Madyankin & Roman Shamin
4. Feather by Cole Bemis & Contributors
5. FontAwesome by Dave Gandy
6. FontAwesome 5 by Fonticons
7. Fontisto by Kenan Gündoğan
8. Foundation by ZURB
9. Ionicons by Iconic Framework
10. MaterialIcons by Google
11. MaterialCommunityIcons by MaterialDesignIcons.com
12. Octicons by Github
13. Zocial by Sam Collins
14. 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.

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.

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

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

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

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

5. Open Your_React_Native_Project -> android -> app -> src -> main -> java-> com -> ProjectName -> MainApplication.java and Import below VectorIconsPackage.

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

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

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.

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.

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

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.

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

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.

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.

3. Creating our main App component.

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

Button Screenshot :-

5. Creating another constant component named as twitter_button.

6. Creating one more button component named as github_button.

Button Screenshot :-

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

Screenshot of Icons :-

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

9. Creating Style.

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

Screenshots :-