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

UIW for React Native

import React from 'react';
import { StyleSheet, TouchableOpacity, ActivityIndicator } from 'react-native';
import { color } from '../utils';
import Div from '../Typography/Div';
import { useTheme } from '@shopify/restyle';
export default function ButtonView(props) {
  const {
    children,
    style,
    textStyle: childStyle,
    rounded,
    bordered,
    color: buttonColor,
    type,
    size,
    disabled,
    loading,
    ...restProps
  } = props;
  const theme = useTheme();
  let backgroundColor, textColor, borderColor, borderWidth, borderRadius;
  switch (type) {
    case 'warning':
      backgroundColor = theme.colors.func200 || '#FFD21D';
      break;
    case 'primary':
      backgroundColor = theme.colors.func400 || '#1890FF';
      break;
    case 'success':
      backgroundColor = theme.colors.func300 || '#52C41A';
      break;
    case 'danger':
      backgroundColor = theme.colors.func600 || '#F4333C';
      break;
    case 'light':
      backgroundColor = theme.colors.white || '#FFFFFF';
      break;
    case 'dark':
      backgroundColor = theme.colors.black || '#000000';
      break;
    default:
      break;
  }
  if (backgroundColor) {
    backgroundColor = color(backgroundColor).rgb().string();
  }
  // if (!type) {
  //   borderColor = color(theme.colors.black).alpha(0.32).rgb().string();
  //   borderWidth = 1;
  // }
  if (disabled) {
    textColor = color(theme.colors.disabled || '#CCCCCC').alpha(0.1).rgb().string();
    backgroundColor = color(theme.colors.disabled || '#CCCCCC').rgb().string();
  }
  if (buttonColor) {
    backgroundColor = color(buttonColor).rgb().string();
  }
  if (rounded && (typeof rounded === 'number' || typeof rounded === 'boolean')) {
    borderRadius = rounded;
  }
  if (bordered) {
    borderColor = color(theme.colors.gray200 || backgroundColor).alpha(1).rgb().string();
    borderWidth = 1;
  }
  // if (!bordered || buttonColor) {
  //   borderWidth = 0;
  // }
  const buttonStyle = {
    backgroundColor: backgroundColor || '#3578e5',
    borderColor,
    borderWidth,
    borderRadius
  };
  if ((type || backgroundColor || buttonColor || buttonStyle.backgroundColor) && type !== 'light') {
    textColor = color(theme.colors.white || '#FFFFFF').rgb().string();
  } else {
    textColor = color(theme.colors.black || '#000000').rgb().string();
  }
  const textStyle = {
    color: textColor
  };
  let sizeStyle = {};
  if (size && styles[size]) {
    sizeStyle = styles[size];
  }
  let boxStyle = {};
  const styleKey = `${size}Box`;
  if (size && styles[styleKey]) {
    boxStyle = styles[styleKey];
  }
  if (!children) {
    return null;
  }
  return <TouchableOpacity testID="RNE__Button__wrap" 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 testID="RNE__Button__div" key={idx} style={[sizeStyle, styles.label, textStyle, childStyle]}>
            {child}
          </Div>;
    })}
    </TouchableOpacity>;
}
ButtonView.defaultProps = {
  activeOpacity: 0.5,
  rounded: 5,
  bordered: false,
  size: 'default'
};
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
  }
});