@futurejj/react-native-checkbox

A papery checkbox for react native

 !GitHub license  !Android !iOS !Web  !TS  !npm bundle size 

A beautiful, customizable, and animated checkbox component for React Native applications. This component works across iOS, Android, and Web platforms with smooth animations and accessibility support.

Features

- ✨ Beautiful animations on state changes
- 🎨 Fully customizable colors and styling
- 📱 Cross-platform (iOS, Android, Web)
- 🔄 Three states: checked, unchecked, and indeterminate
- ♿ Accessibility support built-in
- 📏 Customizable size for various design needs
- 🔌 Works with Expo and standard React Native
- 🔍 TypeScript support with full type definitions

Installation

``bash
yarn add @futurejj/react-native-checkbox


or

- @expo/vector-icons (if using Expo - built-in)
- react-native-vector-icons (if using React Native CLI - follow the installation instructions for react-native-vector-icons)

Usage

$3

`jsx
import React, { useState } from 'react';
import { View } from 'react-native';
import { Checkbox } from '@futurejj/react-native-checkbox';

export default function CheckboxExample() {
const [checked, setChecked] = useState(false);

const toggleCheckbox = () => {
setChecked(!checked);
};

return (

status={checked ? 'checked' : 'unchecked'}
onPress={toggleCheckbox}
/>

);
}
`

$3

`jsx
status="checked" // 'checked', 'unchecked', or 'indeterminate'
disabled={false} // disable the checkbox
onPress={() => {}} // handle press events
color="#6200ee" // color when checked
uncheckedColor="#757575" // color when unchecked
size={32} // customize size (default: 24)
style={{ marginRight: 8 }} // additional styles for the container
/>
`

API Reference

$3

| Prop | Type | Default | Description |
| ---------------- | --------------------------------------------- | ----------- | ------------------------------------ |
| status | 'checked' OR 'unchecked' OR 'indeterminate' | Required | Current status of the checkbox |
| disabled | boolean | false | Whether the checkbox is disabled |
| onPress | (e: GestureResponderEvent) => void | Required | Callback when checkbox is pressed |
| color | string | '#2196F3' | Color of the checkbox when checked |
| uncheckedColor | string | '#757575' | Color of the checkbox when unchecked |
| size | number | 24 | Size of the checkbox icon |
| testID | string | - | Test ID for testing frameworks |
| style | StyleProp | - | Additional styles for container |

Animation

The checkbox includes smooth animations:

- Scale animation when transitioning between states
- Custom border animation for a more engaging interaction

Accessibility

This component is built with accessibility in mind:

- Proper role assignment (checkbox`)
- Correct states reported to screen readers
- Live region updates for dynamic changes

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

---

🙏 Support the project

❤️ Thanks to

- Module built using create-react-native-library
- Heavily Inspired by React Native Paper's Checkbox.Android component
- Readme is edited using Typora