label.js

import React, { PureComponent } from "react";
import PropTypes from "prop-types";
import { Text } from "react-native";

import { Colors } from "../../../Theme";

export default class Label extends PureComponent {
  render() {
    const {
      white,
      blue,
      center,

      font38,
      font30,
      font18,
      font14,
      font12,
      mb10,
      mb16,
      weightLight,
      weightBold,
      weightSemiBold,

      showBorder,
      showBorderActive,

      shadow,
      children,
      style,
      ...props
    } = this.props;

    const labelStyles = [
      Styles.label,
      center && Styles.center,
      white && Styles.colorWhite,
      blue && Styles.colorBlue,
      font38 && Styles.font38,
      font30 && Styles.font30,
      font18 && Styles.font18,
      font14 && Styles.font14,
      font12 && Styles.font12,
      mb10 && Styles.mb10,
      mb16 && Styles.mb16,
      weightLight && Styles.weightLight,
      weightBold && Styles.weightBold,
      weightSemiBold && Styles.weightSemiBold,

      (showBorder || showBorderActive) && Styles.border,
      showBorderActive && Styles.borderActive,

      shadow && Styles.shadow,
      style
    ];

    return (
      <Text style={labelStyles} {...props}>
        {children}
      </Text>
    );
  }
}

Label.propTypes = {
  white: PropTypes.bool,
  blue: PropTypes.bool,
  center: PropTypes.bool,

  font38: PropTypes.bool,
  font30: PropTypes.bool,
  font18: PropTypes.bool,
  font14: PropTypes.bool,
  font12: PropTypes.bool,

  mb10: PropTypes.bool,
  mb16: PropTypes.bool,

  weightLight: PropTypes.bool,
  weightBold: PropTypes.bool,
  weightSemiBold: PropTypes.bool,

  showBorder: PropTypes.bool,
  showBorderActive: PropTypes.bool,

  shadow: PropTypes.bool,
  children: PropTypes.any,
  style: PropTypes.any
};

const Styles = {
  label: { textAlign: "left" },
  center: { textAlign: "center" },

  font38: { fontSize: 38 },
  font30: { fontSize: 30 },
  font18: { fontSize: 18 },
  font14: { fontSize: 14 },
  font12: { fontSize: 12 },

  colorWhite: { color: Colors.white },
  colorBlue: { color: Colors.blue },

  weightLight: { fontWeight: "300" },
  weightSemiBold: { fontWeight: "600" },
  weightBold: { fontWeight: "700" },

  mb10: { marginBottom: 10 },
  mb16: { marginBottom: 16 },

  border: {
    borderWidth: 1,
    borderColor: Colors.white,
    borderRadius: 18,
    lineHeight: 36,
    overflow: "hidden",
    textAlign: "center"
  },
  borderActive: {
    backgroundColor: Colors.white,
    color: Colors.blue
  },

  shadow: {
    textShadowColor: Colors.black30p,
    textShadowRadius: 1,
    textShadowOffset: {
      width: 0,
      height: 1
    }
  }
};