Setup icons to react native

When we start building our react native application we can choose to use a UI toolkit, the framework used by me is React Native Elements . I like this one because is simple and has a nice look and feel. So you can choose to use the basic elements from this module or if you have a custom design you need to implement it. Let’s setup icons for our react native application!

On a new design you need to use icons and a nice pack of react native icons is react-native-vector-icons

So on our react-native let’s add this module and let’s see how to use it. First step is to install the package: yarn add react-native-vector-icons and then link the module into react-native app react-native link

React-Native-Vector-Icons is a set of icon libraries including Entypo, FontAwesome and more. It also has Ionicons a great set of icons that shares Material Design and IOS design.

For example if we need to add a phone icon we can search the name in react-native-vector-icons directory and we choose from different categories what icons we need. Let’s make the import of the icon category in our react-native component.

import Icon from "react-native-vector-icons/Ionicons";

As you can see we import Ionicons category and we need to use the icons from this category. There are two prefixes, one for IOS (ios-<name>) and one for Android(md-<name> devices. For IOS we have:

// ...
<Icon name="ios-phone" color="#ccc" size={25} />

And for Android:

// ...
<Icon name="md-phone" color="#ccc" size={25} />

If we decide to use a single Icon component we have Platform helper from react native:

import { Platform } from "react-native";
import Icon from "react-native-vector-icons/Ionicons";
<Icon name={Platform.OS === "ios" ? "ios-add" : "md-add"}
  color="#ccc"
  size={25}
/>

We can make it more reusable and create a custom component where you send the name of the icon and other props, then depending where you need to use a custom Icon you can import component created.

import React from "react";
import { Platform } from "react-native";
import Icon from "react-native-vector-icons/Ionicons";
const Icon = ({name, ...props}) => {
  <Icon
    name={Platform.OS === "ios" ? `ios-${name}` : `md-${name}`}
    {...props}
  />
}
export default Icon;

Sharing is caring!