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.
npm install react-native-customize-check-boxbash
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;
``