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:
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.
|
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://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:
Also Read :
React Native Creating & Calling Function From Same Class Example
React Native Combine Two Strings Into One Using concat() Function
Wish You All a Very Very Happy New Year 2019
React Native Create Beautiful Social Icons Button using React Native Elements Example Tutorial
React Native NetInfo Example to Detect Internet Connection Android iOS
