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:

``bash
npm install react-native-customize-check-box


`

Output

!Output Example

Example1

!Output Example

`javascript
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 (
style={{
flex: 1,
backgroundColor: "#36454F",
padding: 12,
}}
>
style={{
marginTop: 14,
}}
>
style={{
color: "#fff",
fontSize: 22,
fontWeight: "800",
marginBottom: 24,
textTransform: "capitalize",
}}
>
Simple check boxes

{Object.keys(data).map((key) => {
return (
key={key}
isChecked={data[key]}
label={key.toString()}
onClick={() => setData({ ...data, [key]: !data[key] })}
/>
);
})}


);
};

export default TestScript;
`

Example2

!Output Example

`javascript
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 (
style={{
flex: 1,
backgroundColor: "#36454F",
padding: 12,
}}
>
style={{
marginTop: 14,
}}
>
style={{
color: "#fff",
fontSize: 22,
fontWeight: "800",
marginBottom: 24,
textTransform: "capitalize",
}}
>
check boxes with available props

{Object.keys(data).map((key) => {
return (
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] })}
/>
);
})}


);
};

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