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

UIW for React Native

import React, { useState, useEffect } from 'react';
import { TouchableOpacity, StyleSheet, View } from 'react-native';
import Icon from '../Icon';
import { color } from '../utils';
import Div from '../Typography/Div';
import { useTheme } from '@shopify/restyle';
function CheckBox(props) {
  const theme = useTheme();
  const [state, setState] = useState({
    checked: !!props.checked,
    controlChecked: 'props'
  });
  useEffect(() => {
    if (state.controlChecked === 'props') {
      setState({
        ...state,
        checked: !!props.checked
      });
    }
    setState({
      ...state,
      controlChecked: 'props'
    });
  }, []);
  const onPress = () => {
    const {
      onChange
    } = props;
    setState({
      checked: !state.checked,
      controlChecked: 'state'
    });
    onChange && onChange(state.checked);
  };
  const {
    children,
    style,
    textStyle,
    checkedIcon = 'circle-check',
    unCheckedIcon = 'circle-o',
    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    checked,
    disabled,
    color: $color = theme.colors.primary_background || '#3578e5',
    size = 16,
    ...otherProps
  } = props;
  const {
    checked: $checked
  } = state;
  const iconName = $checked ? checkedIcon : unCheckedIcon;
  const styIcon = {};
  if (children) {
    styIcon.marginRight = 6;
  }
  let colorIcon = $color;
  let divStyl = {};
  if (disabled) {
    colorIcon = theme.colors.disabled || color(colorIcon).alpha(0.52).rgb().string();
    divStyl.opacity = 0.5;
  }
  const textColor = theme.colors.text || 'black';
  return <TouchableOpacity disabled={disabled} {...otherProps} style={[styles.default, style]} onPress={onPress}>
      <View style={[styIcon]}>
        {typeof iconName === 'string' ? <Icon size={size} fill={colorIcon} name={iconName} /> : iconName}
      </View>
      {children && <Div children={children} style={[divStyl, {
      color: textColor
    }, textStyle]} />}
    </TouchableOpacity>;
}
export default CheckBox;
const styles = StyleSheet.create({
  default: {
    flexDirection: 'row',
    alignItems: 'center',
    flex: 1
  }
});