react-native-community-checkbox

Checkbox Component

This package was created with the intention of simplifying the use of the box, it is the lightest functional box among all libraries.

The Checkbox component is a customizable checkbox component for React Native and Expo projects.

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

• 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:

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

import React from "react";
import { View } from "react-native";

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

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

	return (
		<View>
			<Checkbox isChecked={isChecked} setChecked={setChecked} />
		</View>
	);
}

Customization

Optional !!!

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 { View } from "react-native";

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: 25,
		height: 25,
		borderColor: "#000",
		borderWidth: 2,
		borderRadius: 5,
		activeBackgroundColor: "#000",
		inactiveBackgroundColor: "#FFF",
		fillPercentage: 85 // Percentage of the checkbox that is filled when checked
	};

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