react-native-customize-check-box v1.0.2

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;