@ecreeth/rn-ui/src/components/HyperlinkButton/HyperlinkButton.js

Highly customizable and theming components for React Native

import React, { PureComponent } from 'react';
import { StyleSheet, Text as RNText } from 'react-native';
import PropTypes from 'prop-types';
import RNTouchableOpacity from '../RNTouchableOpacity';
import Text from '../Text';

const propTypes = {
  ...RNTouchableOpacity.propTypes,
  text: PropTypes.string,
  textStyle: RNText.propTypes.style,
  disabled: PropTypes.bool,
  size: PropTypes.oneOf(['mini', 'small', 'medium', 'large', 'big']),
};
const defaultProps = {
  text: '',
  textStyle: undefined,
  disabled: false,
  size: 'medium',
};
const mapPropToStyles = [
  'activeOpacity',
];

class HyperlinkButton extends PureComponent {
  render() {
    let {
      children,
      text,
      textStyle,
      ...restProps
    } = this.props;

    if (typeof children === 'string') {
      text = children;
      children = null;
    }

    if (!children) {
      if (textStyle && typeof textStyle === 'number') {
        textStyle = StyleSheet.flatten(textStyle);
      }
      children = (<Text style={textStyle} >{text}</Text>);
    }

    return (
      <RNTouchableOpacity
        {...restProps}
      >
        {children}
      </RNTouchableOpacity>
    );
  }
}

HyperlinkButton.propTypes = propTypes;
HyperlinkButton.defaultProps = defaultProps;

export default HyperlinkButton;