react-native-customize-check-box

react-native-custom-check-box

A flexible and customizable checkbox component for React Native applications. This package provides an easy-to-use checkbox component that can be integrated into your React Native projects to enable users to select or deselect options.

The Checkbox component supports various customization options, including different sizes, colors, and styles. It also offers a selection of event handlers to handle checkbox state changes and provide feedback to users.

Whether you need checkboxes for forms, settings screens, or any other UI element requiring user input, this package simplifies the process of implementing checkboxes in your React Native application.

Features

• Customizable checkbox styles, sizes, and colors.
• Support for different states (checked, unchecked).
• Callback functions for handling checkbox state changes.
• Easy integration with React Native projects.

Installation

Install the package using npm:

npm install react-native-customize-check-box

Output

Example1

import { View, Text } from "react-native";
import React from "react";
import CheckBox from "react-native-customize-check-box";

const TestScript = () => {
  const [data, setData] = React.useState({
    car: false,
    bike: false,
    walk: false,
    scooter: true,
    taxi: false,
    bicycle: false,
  });
  return (
    <View
      style={{
        flex: 1,
        backgroundColor: "#36454F",
        padding: 12,
      }}
    >
      <View
        style={{
          marginTop: 14,
        }}
      >
        <Text
          style={{
            color: "#fff",
            fontSize: 22,
            fontWeight: "800",
            marginBottom: 24,
            textTransform: "capitalize",
          }}
        >
          Simple check boxes
        </Text>
        {Object.keys(data).map((key) => {
          return (
            <CheckBox
              key={key}
              isChecked={data[key]}
              label={key.toString()}
              onClick={() => setData({ ...data, [key]: !data[key] })}
            />
          );
        })}
      </View>
    </View>
  );
};

export default TestScript;

Example2

import { View, Text } from "react-native";
import React from "react";
import CheckBox from "react-native-customize-check-box";

const TestScript = () => {
  const [data, setData] = React.useState({
    car: false,
    bike: false,
    walk: false,
    scooter: true,
    taxi: false,
    bicycle: false,
  });
  return (
    <View
      style={{
        flex: 1,
        backgroundColor: "#36454F",
        padding: 12,
      }}
    >
      <View
        style={{
          marginTop: 14,
        }}
      >
        <Text
          style={{
            color: "#fff",
            fontSize: 22,
            fontWeight: "800",
            marginBottom: 24,
            textTransform: "capitalize",
          }}
        >
          check boxes with available props
        </Text>
        {Object.keys(data).map((key) => {
          return (
            <CheckBox
              key={key}
              isChecked={data[key]}
              label={key.toString()}
              labelStyle={{ fontWeight: "600" }}
              checkedCheckBoxColor={"#fc8803"}
              checkedIconColor="blue"
              checkboxContainerStyle={{
                borderRadius: 20,
                height: 40,
                width: 40,
              }}
              checkedIconStyle={{ width: 25, height: 25 }}
              uncheckedCheckBoxColor={"red"}
              onClick={() => setData({ ...data, [key]: !data[key] })}
            />
          );
        })}
      </View>
    </View>
  );
};

export default TestScript;

Prop name	default	type	Description
isChecked	false	bool	checkbox check state
label	null	String	give your checkbox label.
labelStyle		Object	style your checkbox label text.
checkedIconColor	white	String	change the check icon color
checkedIconStyle		Object	style your checked icon as per your need.
checkedCheckBoxColor	green	String	change checkbox color when box state is true
uncheckedCheckBoxColor	black	String	style unchecked box border color when it is unchecked
checkedBoxContainerStyle		String	style your checkbox according your needs like give borderRadius, height & width according your need.
onClick		function()	callback fun to handle current state of checkbox