@uiw/react-native/lib/Button/index.js

UIW for React Native

import React from 'react';
import { StyleSheet, TouchableOpacity, ActivityIndicator } from 'react-native';
import { color, colors } from '../utils';
import Div from '../Typography/Div';
export default class ButtonView extends React.Component {
  static defaultProps = {
    activeOpacity: 0.5,
    rounded: 5,
    bordered: true,
    size: 'default'
  };

  render() {
    const {
      children,
      style,
      textStyle: childStyle,
      rounded,
      bordered,
      color: buttonColor,
      type,
      size,
      disabled,
      loading,
      ...restProps
    } = this.props;
    let backgroundColor, textColor, borderColor, borderWidth, borderRadius;

    switch (type) {
      case 'warning':
        backgroundColor = colors.yellow;
        break;

      case 'primary':
        backgroundColor = colors.blue;
        break;

      case 'success':
        backgroundColor = colors.green;
        break;

      case 'danger':
        backgroundColor = colors.red;
        break;

      case 'light':
        backgroundColor = colors.white;
        break;

      case 'dark':
        backgroundColor = colors.black;
        break;

      default:
        break;
    }

    if (backgroundColor) {
      backgroundColor = color(backgroundColor).rgb().string();
    }

    if (type) {
      textColor = color(backgroundColor).isLight() ? color(colors.black).rgb().string() : color(colors.white).rgb().string();
    }

    if (!type) {
      borderColor = color(colors.black).alpha(0.32).rgb().string();
      borderWidth = 1;
    }

    if (disabled) {
      textColor = color(textColor).alpha(0.3).rgb().string();
    }

    if (buttonColor) {
      backgroundColor = color(buttonColor).rgb().string();
      textColor = color(buttonColor).isLight() ? color(buttonColor).darken(0.9).string() : color(buttonColor).lighten(0.9).string();
    }

    if (rounded && typeof rounded === 'number') {
      borderRadius = rounded;
    }

    if (backgroundColor) {
      borderColor = color(backgroundColor).darken(0.2).string();
      borderWidth = 1;
    }

    if (!bordered) {
      borderWidth = 0;
    }

    const buttonStyle = {
      backgroundColor,
      borderColor,
      borderWidth,
      borderRadius
    };
    const textStyle = {
      color: textColor
    };
    let sizeStyle = {};

    if (size && styles[size]) {
      sizeStyle = styles[size];
    }

    let boxStyle = {};
    const stylKey = `${size}Box`;

    if (size && styles[stylKey]) {
      boxStyle = styles[stylKey];
    }

    if (!children) {
      return null;
    }

    return <TouchableOpacity style={[styles.button, styles.content, buttonStyle, boxStyle, style]} disabled={disabled} {...restProps}>
        {loading && <ActivityIndicator size={16} color={textColor} style={styles.icon} />}
        {React.Children.toArray(children).map((child, idx) => {
        return <Div key={idx} style={[sizeStyle, styles.label, textStyle, childStyle]}>
              {child}
            </Div>;
      })}
      </TouchableOpacity>;
  }

}
const styles = StyleSheet.create({
  button: {
    borderStyle: 'solid',
    display: 'flex'
  },
  content: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center'
  },
  icon: {
    width: 16,
    marginRight: 4
  },
  label: {// textAlign: 'center',
  },
  smallBox: {
    paddingHorizontal: 3
  },
  defaultBox: {
    paddingHorizontal: 8
  },
  largeBox: {
    paddingHorizontal: 10
  },
  small: {
    marginVertical: 4,
    fontSize: 14
  },
  default: {
    marginVertical: 8,
    fontSize: 16
  },
  large: {
    marginVertical: 10,
    fontSize: 18
  }
});