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

React Native Ionicons Example

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.

  • AntDesign by AntFinance (297 icons)
  • Entypo by Daniel Bruce (411 icons)
  • EvilIcons by Alexander Madyankin & Roman Shamin (v1.10.1, 70 icons)
  • Feather by Cole Bemis & Contributors (v4.28.0, 285 icons)
  • FontAwesome by Dave Gandy (v4.7.0, 675 icons)
  • FontAwesome 5 by Fonticons, Inc. (v5.13.0, 1588 (free) 7842 (pro) icons)
  • Fontisto by Kenan Gündoğan (v3.0.4, 615 icons)
  • Foundation by ZURB, Inc. (v3.0, 283 icons)
  • Ionicons by Iconic Framework (v5.0.1, 1227 icons)
  • MaterialIcons by Google, Inc. (v4.0.0, 1547 icons)
  • MaterialCommunityIcons by MaterialDesignIcons.com (v5.3.45, 5346 icons)
  • Octicons by Github, Inc. (v8.4.1, 184 icons)
  • Zocial by Sam Collins (v1.0, 100 icons)
  • SimpleLineIcons by 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.

React Native Ionicons Red menu Icon

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

React Native Ionicons Example 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.