Table of Contents
Introduction
Hello everyone in article we are going to explore how we could integrate React Native Ionicons.
Ionicons an open source pack of premium designed icons for use in web, iOS, Android, and desktop apps by the team behind the Ionic framework.
To sum it up, if you need to add an icon to a given functionality in your app, whether it’s navigation arrows, battery levels, social media icons, Ionicons probably has it.
For our React Native Example we are going to build a list of social media platforms logos, each with its distinctive color, to show the power of Ionicons.
The final result
Environment Setup
If you haven’t created a a React Native project, this is the time to do so. You can start a new project by executing the commands below.
Using Expo
expo init new-app
Using React Native Cli
react-native init new-app
install Ionicons In React Native
If you are using expo you already have access to Ionicons by default, it comes pre-installed with expo, within the react-native-vector-icons library. It includes more packages not just Ionicons, in case you didn’t find your desired Icon.
AntDesignby AntFinance (297 icons)
Entypoby Daniel Bruce (411 icons)
EvilIconsby Alexander Madyankin & Roman Shamin (v1.10.1, 70 icons)
Featherby Cole Bemis & Contributors (v4.28.0, 285 icons)
FontAwesomeby Dave Gandy (v4.7.0, 675 icons)
FontAwesome 5by Fonticons, Inc. (v5.13.0, 1588 (free) 7842 (pro) icons)
Fontistoby Kenan Gündoğan (v3.0.4, 615 icons)
Foundationby ZURB, Inc. (v3.0, 283 icons)
Ioniconsby Iconic Framework (v5.0.1, 1227 icons)
MaterialIconsby Google, Inc. (v4.0.0, 1547 icons)
MaterialCommunityIconsby MaterialDesignIcons.com (v5.3.45, 5346 icons)
Octiconsby Github, Inc. (v8.4.1, 184 icons)
Zocialby Sam Collins (v1.0, 100 icons)
SimpleLineIconsby Sabbir & Contributors (v2.4.1, 189 icons)
You can view the full list of the icons from here @oblador/react-native-vector-icons
If you are using React Native CLI you can install it using yarn or npm
yarn add react-native-vector-icons
Ionicons Basic Usage
First import the Ionicons component
import { Ionicons } from '@expo/vector-icons';
Then you can use it directly by adding icon props.
<Ionicons name={menu} size={32} color={red} />
It will result in a medium size red menu icon, like below.
Building Social Media Listing App
To showcase the React Native Ionicons component, let’s build a quick listing app, with a name and icons of famous social media platforms, and customize each Icon to the color of its logo.
First we will use the useState hook and make a state variable with the entire list of platforms data. The render it in a Grid Flatlist.
Full Code
import React, { useState } from 'react'; import { StyleSheet, Text, View, FlatList } from 'react-native'; import { Ionicons } from '@expo/vector-icons'; export default function App() { const [ menu, setMenu ] = useState([ { id: "1", name: "Facebook", icon: "logo-facebook", color: "#3949A9" }, { id: "2", name: "Linkedin", icon: "logo-linkedin", color: "#42A5F6" }, { id: "3", name: "Youtube", icon: "logo-youtube", color: "#CC191E" }, { id: "4", name: "Twitter", icon: "logo-twitter", color: "#55ADEF" }, { id: "5", name: "Pinterest", icon: "logo-pinterest", color: "#BD2028" }, { id: "6", name: "Instagram", icon: "logo-instagram", color: "#B62889" }, { id: "7", name: "Reddit", icon: "logo-reddit", color: "#F14D01" }, { id: "8", name: "Tumblr", icon: "logo-tumblr", color: "#36465D" }, { id: "9", name: "Whatsapp", icon: "logo-whatsapp", color: "#13AF0B" }, { id: "10", name: "Skype", icon: "logo-skype", color: "#00AFF0" }, { id: "11", name: "Dribble", icon: "logo-dribbble", color: "#EA4C89" }, { id: "12", name: "Slack", icon: "logo-slack", color: "#D81C57" }, { id: "13", name: "Twitch", icon: "logo-twitch", color: "#60419F" }, { id: "14", name: "VK", icon: "logo-vk", color: "#587EA3" }, { id: "15", name: "Wordpress", icon: "logo-wordpress", color: "#217195" } ]) return ( <View style={styles.container}> <Text style={styles.title} >React Native Ionicons</Text> <FlatList numColumns={3} data={menu} renderItem={({item}) => { return ( <View style={styles.listItem}> <Ionicons name={item.icon} size={60} color={item.color} /> <Text style={styles.iconName}>{item.name}</Text> </View> ) }} /> </View> ); } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center', paddingTop: 60 }, title: { fontWeight: "bold", fontSize: 35, marginVertical: 40, color: "#03506f" }, iconName: { fontWeight: "bold", fontSize: 20, margin: 10 }, listItem: { alignItems: 'center', justifyContent: 'center', width: "33%" } });
Notice: To make a Grid Flatlist, all you need is to add the prop numColumns, with the value of how many items in each row, the rest will fall to the next line.
Result
Conclusion
There you have it a nice React Native Ionicons example, using Expo and React Native Cli.
I hope you enjoyed this article, and found it as informative as you have expected.
I will publish the full code to Github and Expo.io, in case some one of you wanted to clone or test it.
Stay safe and happy coding.