https://github.com/getsettalk/react-native-advanced-checkbox
A powerful, fully-featured checkbox component for React Native, built with TypeScript and designed for maximum flexibility, accessibility, and performance. Supports custom images, rich animations, grouped checkboxes, haptic feedback, and ready for the new architecture support.
https://github.com/getsettalk/react-native-advanced-checkbox
android checkbox ios react-native
Last synced: about 1 year ago
JSON representation
A powerful, fully-featured checkbox component for React Native, built with TypeScript and designed for maximum flexibility, accessibility, and performance. Supports custom images, rich animations, grouped checkboxes, haptic feedback, and ready for the new architecture support.
- Host: GitHub
- URL: https://github.com/getsettalk/react-native-advanced-checkbox
- Owner: getsettalk
- Created: 2025-04-10T09:43:44.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-05-13T09:10:38.000Z (about 1 year ago)
- Last Synced: 2025-06-14T20:56:27.777Z (about 1 year ago)
- Topics: android, checkbox, ios, react-native
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/react-native-advanced-checkbox
- Size: 80.1 KB
- Stars: 11
- Watchers: 1
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# 🎯 **react-native-advanced-checkbox**
A versatile, customizable checkbox component for React Native
Built with TypeScript · Animations · Group Management
---
## 🚀 Installation
Install the package via npm or Yarn:
```bash
npm install react-native-advanced-checkbox
# or
yarn add react-native-advanced-checkbox
```
---
## ✨ Features
- ✅ **TypeScript Support**
- 🖼️ **Custom Images** for checked/unchecked states
- 🎨 **Color Customization** (checked / unchecked)
- 🏷️ **Labels** with left/right positioning
- 🧠 **Checkbox Groups** with `CheckboxGroup`
- 🎞️ **Animations**: `bounce`, `fade`, `rotate`
- ♿ **Accessibility**: screen reader support
- 🧪 **Testability**: `testID` support
- 📱 **Cross-Platform** (iOS & Android)
- ⚛️ **New Architecture Ready** with `useNativeDriver`
---
## 📦 Compatibility
| Package | Version |
|----------------|-----------------|
| **React Native** | `>= 0.72.0` (tested up to 0.79.x) |
| **React** | `>= 18.2.0` (tested up to 19.x) |
---
## 🧑💻 Usage
### ✅ Basic Example
```tsx
import React, { useState } from 'react';
import { AdvancedCheckbox } from 'react-native-advanced-checkbox';
const App = () => {
const [checked, setChecked] = useState(false);
return (
);
};
export default App;
```
---
### 👥 Checkbox Group Example
```tsx
import React, { useState } from 'react';
import { View } from 'react-native';
import { CheckboxGroup, AdvancedCheckbox } from 'react-native-advanced-checkbox';
const App = () => {
const [selectedValues, setSelectedValues] = useState(['option1']);
return (
);
};
export default App;
```
---
### ⚙️ Advanced Customization
```tsx
```
---
## 📋 Props
### `AdvancedCheckbox`
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `value` | `boolean \| string` | `false` | Current value |
| `onValueChange` | `(value: boolean \| string) => void` | - | Callback |
| `checkedImage` / `uncheckedImage` | `ImageSourcePropType` | - | Custom images |
| `size` | `number` | `24` | Size of checkbox |
| `label` | `string` | - | Label text |
| `labelPosition` | `'left' \| 'right'` | `'right'` | Label alignment |
| `labelStyle`, `containerStyle`, `checkBoxStyle` | `StyleProp` | - | Styling |
| `checkedColor` / `uncheckedColor` | `string` | `#007AFF` / `#ccc` | Colors |
| `disabled` | `boolean` | `false` | Disable checkbox |
| `animationType` | `'bounce' \| 'fade' \| 'rotate'` | `'bounce'` | Animation type |
| `checkMarkContent` | `React.ReactNode` | `✓` | Custom checkmark |
| `testID`, `accessibilityLabel`, `accessibilityHint` | `string` | - | Test & a11y support |
### `CheckboxGroup`
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `onValueChange` | `(values: string[]) => void` | - | Callback |
| `initialValues` | `string[]` | `[]` | Initial selection |
| `style` | `StyleProp` | - | Group style |
| `children` | `React.ReactNode` | - | Checkbox items |
---
## 🎨 Customization Tips
```tsx
// Custom images and you can call image url also here
// Custom colors and style
// Custom checkmark content
✔}
/>
```
---
## 🤝 Contributing
We welcome contributions! Check out our [CONTRIBUTING.md](CONTRIBUTING.md) for details.
---
## 📜 Code of Conduct
Read our [CODE_OF_CONDUCT.md](CODE_OF_CONDUCT.md) to help maintain a welcoming community.
---
## 📄 License
MIT © [Sujeet Kumar](https://github.com/getsettalk)
See [LICENSE](LICENSE) for full details.
---
## 🛠 Support & Feedback
Found a bug or have a feature request?
Please open an issue on [GitHub](https://github.com/getsettalk/react-native-advanced-checkbox).