React Native Common Icon

rn-common-icon.js

/**
 * # icon.js
 *
 * Component
 *
 * @author dataday
 *
 * @flow
 */
'use strict'

/**
 * ## Imports
 *
 * Necessary components
 */
import React, { PropTypes } from 'react'
import VectorIcon from 'react-native-vector-icons/MaterialCommunityIcons'

import { STYLES, COLOURS, ICONS } from '../../constants/ui'

const InitialProps = {
  size: ICONS.SIZE.XS,
  color: COLOURS.iconInActive,
  styleDefault: [ STYLES.icon ],
  styleIconBox: [ STYLES.iconBox ]
}

export default class Icon extends React.Component {
  static defaultProps = InitialProps

  /**
   * setNativeProps
   * @see https://facebook.github.io/react-native/docs/direct-manipulation.html
   * @param {Object} props Parent properties.
   * @returns {Void}
   */
  setNativeProps = (props: Object) => {
    this.children.forEach((child) => {
      child.setNativeProps(props)
    })
  }

  render () {
    const styleDefault = (this.props.size > 24)
      ? this.props.styleIconBox
      : this.props.styleDefault

    return (
      <VectorIcon
        key={'icon' + this.props.name}
        {...this.props}
        style={[ styleDefault, this.props.style ]}
      />
    )
  }
}

Icon.propTypes = {
  name: PropTypes.string.isRequired,
  size: PropTypes.number,
  color: PropTypes.string,
  style: PropTypes.oneOfType([
    PropTypes.array,
    PropTypes.number
  ])
}