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}
        }/>
    );
  }
}