Module React Native Icon component

I started developing my first cross-platform application this week. I’ve been using a lot of icons while developing, and it started to get messy and tedious to import the Icon class from Expo each time I needed to use. I made a simple reusable icon component to solve that issue.

Code#

The icon takes 4 props.

Size - The size in pixels of the icon. This is a number value
Color - The color of the icon. We use a hex value string for this. ex. ‘#fff’
onPress - function to execute when the icon is pressed. This is an optional value and should only be used if you want your icon to be clickable
Name - this will display an icon based on the platform being used.

import React from 'react';
import { Icon } from 'expo';

export class Icons extends React.Component {
  render() {
    return (
      <Icon.Ionicons
        size={this.props.size}
        onPress={() => this.props.function}
        color={this.props.color}
        name= {
          Platform.OS === 'ios'
            ? {this.props.iOS}
            : {this.props.android}
        }/>
    );
  }
}