Use React Native Ionicons Icon in Android iOS App Example

React Native Ionicons is a premium free icon library available for all platform developers. It’s like a ocean of icons with some specific fish inside it. The Ionicons has platform based icons means if you are a Web developer then there are icons for you, If you are android developer then you can use their icons as well as iOS developer can also use their icons. All the Ionicons icons is based on MIT license and fully open source. So in today’s tutorial we would learn about How to use react native Ionicons icon in react native android iOS app. We would also learn about complete installation process from NPM package to react native app.

Contents in this project Use react native ionicons icon in android iOS app example:-

1. The first step is to install react-native-ionicons NPM package in your current react native project Root directory. So open your project’s Root directory in Command Prompt in Windows or Terminal in MAC and execute below command.


Screenshot after finish installation:

2. React Native Ionicons Icon Installation Guide for Android:

1. Open your react native project Root director in CMD or Terminal and execute below link command to link the Assets Icon folder.


Screenshot after finish linking:

3. React Native Ionicons Icon Installation Guide for iOS MAC:

1. Open your react native project Root folder in Terminal. Execute below POD installation command to link the newly downloaded Ionicons package.

Screenshot of Terminal in MAC:

2. Now open Your_React_Native_Project -> ios -> Your_Project_Name -> info.plist file and put below code inside it to connect the Ionicons Icons.

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

4. Start Coding for App:

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

2. Import Icon from ‘react-native-ionicons’ .

3. Create your project’s main export default HomeScreen functional component.

4. Create return() block and here we would First make a TouchableOpacity component and Wrap the Icon component inside it. Using this method we can easily make the Icon clickable.

List of all available Props in Ionicons:

  1. name : Used to pass the name of Icon. You can find the complete Ionicons library Here.
  2. size : Used to set Size of Icon.
  3. color : Used to set Color of Icon.
  4. style : Used to apply extra styling on Icon.
  5. ios : Used to set Icon for iOS iPhone devices.
  6. android : Used to set Icon for Android devices.

Note: In below Icon component we would use two Syntax ios-Icon_Name and md-Icon_Name. Here ios represents all the iOS devices and md represents all the Android devices.

5. Creating Style.

6. Complete Source Code for App.js file class:

Screenshot in Android device:

Use React Native Ionicons Icon in Android iOS App Example Screenshot for iOS device:

Leave a Reply

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