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.
|
1 |
npm install react-native-ionicons@^4.x |
Screenshot:
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.
|
1 |
react-native link react-native-ionicons |
Screenshot:
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.
|
1 |
npx pod-install ios |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 |
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd"> <plist version="1.0"> <dict> <key>CFBundleDevelopmentRegion</key> <string>en</string> <key>CFBundleDisplayName</key> <string>project</string> <key>CFBundleExecutable</key> <string>$(EXECUTABLE_NAME)</string> <key>CFBundleIdentifier</key> <string>$(PRODUCT_BUNDLE_IDENTIFIER)</string> <key>CFBundleInfoDictionaryVersion</key> <string>6.0</string> <key>CFBundleName</key> <string>$(PRODUCT_NAME)</string> <key>CFBundlePackageType</key> <string>APPL</string> <key>CFBundleShortVersionString</key> <string>1.0</string> <key>CFBundleSignature</key> <string>????</string> <key>CFBundleVersion</key> <string>1</string> <key>LSRequiresIPhoneOS</key> <true/> <key>NSAppTransportSecurity</key> <dict> <key>NSAllowsArbitraryLoads</key> <true/> <key>NSExceptionDomains</key> <dict> <key>localhost</key> <dict> <key>NSExceptionAllowsInsecureHTTPLoads</key> <true/> </dict> </dict> </dict> <key>NSLocationWhenInUseUsageDescription</key> <string/> <key>UILaunchStoryboardName</key> <string>LaunchScreen</string> <key>UIRequiredDeviceCapabilities</key> <array> <string>armv7</string> </array> <key>UISupportedInterfaceOrientations</key> <array> <string>UIInterfaceOrientationPortrait</string> <string>UIInterfaceOrientationLandscapeLeft</string> <string>UIInterfaceOrientationLandscapeRight</string> </array> <key>UIViewControllerBasedStatusBarAppearance</key> <false/> <key>UIAppFonts</key> <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> </dict> </plist> |
4. Start Coding for App:
1. Open your project’s main App.js file and import View, Text, SafeAreaView, StyleSheet and TouchableOpacity component.
|
1 2 3 |
import * as React from 'react'; import { View, Text, SafeAreaView, StyleSheet, TouchableOpacity } from 'react-native'; |
2. Import Icon from ‘react-native-ionicons’ .
|
1 |
import Icon from 'react-native-ionicons'; |
3. Create your project’s main export default HomeScreen functional component.
|
1 2 3 4 |
export default function HomeScreen() { } |
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:
- name : Used to pass the name of Icon. You can find the complete Ionicons library Here.
- size : Used to set Size of Icon.
- color : Used to set Color of Icon.
- style : Used to apply extra styling on Icon.
- ios : Used to set Icon for iOS iPhone devices.
- 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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 |
<TouchableOpacity onPress={() => alert('click')} > <Icon name="logo-android" size={40} color="#00C853" style={{ margin: 15 }} /> </TouchableOpacity> <Icon name="logo-googleplus" size={40} color="#DD2C00" style={{ margin: 15 }} /> <Icon name="logo-github" size={40} color="#212121" style={{ margin: 15 }} /> <Icon name="logo-html5" size={40} color="#DD2C00" style={{ margin: 15 }} /> <Icon ios="ios-appstore" android="md-appstore" size={40} color="#00C853" style={{ margin: 15 }} /> <Icon ios="ios-battery-charging" android="md-battery-charging" size={40} color="#3E2723" style={{ margin: 15 }} /> <Icon ios="ios-bluetooth" android="md-bluetooth" size={40} color="#0091EA" style={{ margin: 15 }} /> <Icon ios="ios-cafe" android="md-cafe" size={40} color="#E91E63" style={{ margin: 15 }} /> <Icon ios="ios-camera" android="md-camera" size={40} color="#9C27B0" style={{ margin: 15 }} /> <Icon ios="ios-cloud-download" android="md-cloud-download" size={40} color="#0091EA" style={{ margin: 15 }} /> <Icon ios="ios-contacts" android="md-contacts" size={40} color="#006064" style={{ margin: 15 }} /> <Icon ios="ios-finger-print" android="md-finger-print" size={40} color="#FFAB00" style={{ margin: 15 }} /> |
5. Creating Style.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
const styles = StyleSheet.create({ MainContainer: { flex: 1, justifyContent: 'center', alignItems: 'center' }, iconRow: { flexDirection: 'row', flexWrap: 'wrap', alignItems: 'center', justifyContent: 'center' } }); |
6. Complete Source Code for App.js file class:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 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 |
import * as React from 'react'; import { View, Text, SafeAreaView, StyleSheet, TouchableOpacity } from 'react-native'; import Icon from 'react-native-ionicons'; export default function HomeScreen() { return ( <SafeAreaView style={{ flex: 1 }}> <View style={styles.MainContainer}> <Text style={{ fontSize: 24 }}> How to Use React Native Ionicons </Text> <View style={styles.iconRow}> <TouchableOpacity onPress={() => alert('click')} > <Icon name="logo-android" size={40} color="#00C853" style={{ margin: 15 }} /> </TouchableOpacity> <Icon name="logo-googleplus" size={40} color="#DD2C00" style={{ margin: 15 }} /> <Icon name="logo-github" size={40} color="#212121" style={{ margin: 15 }} /> <Icon name="logo-html5" size={40} color="#DD2C00" style={{ margin: 15 }} /> <Icon ios="ios-appstore" android="md-appstore" size={40} color="#00C853" style={{ margin: 15 }} /> <Icon ios="ios-battery-charging" android="md-battery-charging" size={40} color="#3E2723" style={{ margin: 15 }} /> <Icon ios="ios-bluetooth" android="md-bluetooth" size={40} color="#0091EA" style={{ margin: 15 }} /> <Icon ios="ios-cafe" android="md-cafe" size={40} color="#E91E63" style={{ margin: 15 }} /> <Icon ios="ios-camera" android="md-camera" size={40} color="#9C27B0" style={{ margin: 15 }} /> <Icon ios="ios-cloud-download" android="md-cloud-download" size={40} color="#0091EA" style={{ margin: 15 }} /> <Icon ios="ios-contacts" android="md-contacts" size={40} color="#006064" style={{ margin: 15 }} /> <Icon ios="ios-finger-print" android="md-finger-print" size={40} color="#FFAB00" style={{ margin: 15 }} /> </View> </View> </SafeAreaView> ); }; const styles = StyleSheet.create({ MainContainer: { flex: 1, justifyContent: 'center', alignItems: 'center' }, iconRow: { flexDirection: 'row', flexWrap: 'wrap', alignItems: 'center', justifyContent: 'center' } }); |
Screenshot in Android device:
Screenshot for iOS device:
