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

UIW for React Native

import React from 'react';
import { TouchableOpacity, StyleSheet, View } from 'react-native';
import Icon from '../Icon';
import { color } from '../utils';
import Div from '../Typography/Div';
export default class CheckBox extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      checked: !!props.checked
    };
  }

  static defaultProps = {
    checkedIcon: 'circle-check',
    unCheckedIcon: 'circle-o',
    color: '#008EF0',
    size: 16
  };

  UNSAFE_componentWillReceiveProps(nextProps) {
    if (nextProps.checked !== this.props.checked) {
      this.setState({
        checked: !!nextProps.checked
      });
    }
  }

  onPress = () => {
    const {
      onChange
    } = this.props;
    this.setState({
      checked: !this.state.checked
    }, () => {
      onChange && onChange(this.state.checked);
    });
  };

  render() {
    const {
      children,
      style,
      textStyle,
      checkedIcon,
      unCheckedIcon,
      // eslint-disable-next-line @typescript-eslint/no-unused-vars
      checked,
      disabled,
      color: $color,
      size,
      ...otherProps
    } = this.props;
    const {
      checked: $checked
    } = this.state;
    const iconName = $checked ? checkedIcon : unCheckedIcon;
    const styIcon = {};

    if (children) {
      styIcon.marginRight = 6;
    }

    let colorIcon = $color;
    let divStyl = {};

    if (disabled) {
      colorIcon = color(colorIcon).alpha(0.52).rgb().string();
      divStyl.opacity = 0.5;
    }

    return <TouchableOpacity disabled={disabled} {...otherProps} style={[styles.default, style]} onPress={this.onPress}>
        <View style={[styIcon]}>
          {typeof iconName === 'string' ? <Icon size={size} fill={colorIcon} name={iconName} /> : iconName}
        </View>
        {children && <Div children={children} style={[divStyl, textStyle]} />}
      </TouchableOpacity>;
  }

}
const styles = StyleSheet.create({
  default: {
    flexDirection: 'row',
    alignItems: 'center',
    flex: 1
  }
});