react-native-community-checkbox

Checkbox Component

The Checkbox component is a customizable checkbox component for React Native.

Installation

To use the Checkbox component in your React Native project, follow these steps:

• Install the required dependencies by running the following command:

npm install react-native-community-checkbox

yarn add react-native-community-checkbox

• Copy the index.tsx file from the src/component directory of this repository into your project's source code.

• Import the Checkbox component in your desired file:

import Checkbox from 'react-native-community-checkbox';

Usage

To use the Checkbox component, you need to provide the following props:

• isChecked (boolean): Represents the current state of the checkbox.
• setChecked (React.Dispatch<React.SetStateAction>): A function to update the state of the checkbox.
• styles (optional): An object containing custom styles for the checkbox.

Here's an example of how to use the Checkbox component:

import React from "react";

import Checkbox from 'react-native-community-checkbox';

function App() {
	const [isChecked, setChecked] = React.useState(false);

	return (
		<View style={styles.container}>
			<Checkbox isChecked={isChecked} setChecked={setChecked} />
		</View>
	);
}

Customization

You can customize the Checkbox component by providing custom styles as props. Here's an example of how to customize the checkbox:

import React from "react";

import Checkbox from 'react-native-community-checkbox';

interface StylesCheckbox {
	width?: number; // Width of the checkbox | Default: 21
	height?: number; // Height of the checkbox | Default: 21
	borderColor?: string; // Border color of the checkbox | Default: #2d4935
	borderWidth?: number; // Border width of the checkbox | Default: 1
	borderRadius?: number; // Border radius of the checkbox | Default: 2
	activeBackgroundColor?: string; // Background color of the checkbox when checked | Default: #2d4935
	inactiveBackgroundColor?: string; // Background color of the checkbox when unchecked | Default: #fff
	fillPercentage?: number; // Percentage of the checkbox that is filled when checked | Default: 80
}

function App() {
	const [isChecked, setChecked] = React.useState(false);

	const stylesCheckbox: StylesCheckbox = {
		width: 30,
		height: 30,
		borderColor: "#000",
		borderWidth: 2,
		borderRadius: 5,
		activeBackgroundColor: "#000",
		inactiveBackgroundColor: "#FFF",
		fillPercentage: 80 // Percentage of the checkbox that is filled when checked
	};

	return (
		<View style={styles.container}>
			<Checkbox isChecked={isChecked} setChecked={setChecked} styles={stylesCheckbox} />
		</View>
	);
}