react-native-community-checkbox

Checkbox Component

This package was created with the intention of simplifying the use of the checkbox components, it is the lightest functional checkbox 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>
	);
}