CheckBox Component

The CheckBox component is a versatile and customizable checkbox input designed for React Native applications. It combines functionality with flexibility, allowing developers to create interactive checkbox elements that can be easily integrated into forms, settings pages, or any part of the app requiring user confirmation or selection.

Key features include:

• Customizable appearance (size, colors, styles)
• Optional label with custom styling
• Error message display capability
• Accessibility support
• Controlled and uncontrolled usage
• Disable functionality

This component is built using React Native's core components and integrates with the Feather icon set for the checkmark, making it a lightweight yet powerful addition to any React Native project.

Props

Prop	Type	Default	Description
noMargin	boolean	false	If true, removes the bottom margin of the checkbox container.
checkedStatus	boolean	-	Controls the checked state of the checkbox.
value	boolean	-	Alternative prop to control the checked state.
containerStyle	Object	-	Custom styles for the outermost container.
boxStyle	Object	-	Custom styles for the checkbox box.
onValueChange	Function	-	Callback function called when the checkbox state changes.
label	string	-	Text label displayed next to the checkbox.
small	boolean	false	If true, renders a smaller checkbox.
activeColor	string	'#212121'	Color of the checkbox when checked.
labelStyles	Object	-	Custom styles for the label text.
disable	boolean	false	If true, disables the checkbox.
testId	string	-	Test ID for the component.
error	string	-	Error message to display below the label.

Usage

import { CheckBox } from "@appmaker-xyz/ui";

function MyComponent() {
  const [isChecked, setIsChecked] = useState(false);

  return (
    <CheckBox
      label="Accept terms and conditions"
      checkedStatus={isChecked}
      onValueChange={(newValue) => setIsChecked(newValue)}
      activeColor="#007AFF"
      error={isChecked ? null : "You must accept the terms to continue"}
    />
  );
}

Styling

The component uses a combination of inline styles and a StyleSheet object for its appearance. You can customize the look by passing custom styles through the containerStyle, boxStyle, and labelStyles props.

Notes

• The component uses both checkedStatus and value props to determine the checked state, with checkedStatus taking precedence.
• The checkbox state is controlled internally but can also be controlled externally through the checkedStatus or value props.
• Error messages are displayed in red below the label when the error prop is provided.