Module React Native Icon component

Nice reusable Icon component using Expo's Ionicons

Mon, 12 Nov 2018

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}
        }/>
    );
  }
}
Loading...
Edward Beazer

Edward Beazer - I just like to build shit. Sometimes I get stuck for hours, even days while trying to figure out how to solve an issue or implement a new feature. Hope my tips and tutorials can save you some time.