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