React Native Common Button

rn-common-button.js

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

/**
 * ## Imports
 *
 * Necessary components
 */
import React, { PropTypes } from 'react'
import { Platform, TouchableHighlight, TouchableNativeFeedback } from 'react-native'

import { COLOURS } from '../../constants/ui'

const InitialProps = {
  onPress: () => {},
  disabled: false,
  activeOpacity: 0.8,
  underlayColor: 'transparent',
  feedbackColour: COLOURS.iconAccent
}

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

  render () {
    const Component = Platform.OS === 'ios'
      ? TouchableHighlight
      : TouchableNativeFeedback

    return (
      <Component
        ref='Button'
        accessible={true}
        // IOS
        accessibilityTraits='button'
        // Android
        accessibilityComponentType='button'
        touchableGetHighlightDelayMS={() => { return 0 }}
        // background={this._getNativeFeedbackAnimation}
        {...this.props}
      />
    )
  }

  _getNativeFeedbackAnimation = () => {
    // TODO: event bugs to resolve in Android 7
    // const { feedbackColour } = this.props
    // if (Platform.OS === 'android') {
    //   if (Platform['Version'] >= 21) {
    //     return TouchableNativeFeedback.Ripple(feedbackColour)
    //   } else {
    //     return TouchableNativeFeedback.SelectableBackground()
    //   }
    // }
    return null
  }
}

Button.propTypes = {
  onPress: PropTypes.func,
  disabled: PropTypes.bool,
  activeOpacity: PropTypes.number,
  feedbackColour: PropTypes.string,
  underlayColor: PropTypes.string,
  style: PropTypes.oneOfType([
    PropTypes.array,
    PropTypes.number
  ])
}