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:

1. Install the required dependencies by running the following command:

npm install react-native-community-checkbox

yarn add react-native-community-checkbox

1. 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>
    );
}