🎯 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:

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

🧑‍💻 Usage

✅ Basic Example

import React, { useState } from 'react';
import { AdvancedCheckbox } from 'react-native-advanced-checkbox';

const App = () => {
  const [checked, setChecked] = useState(false);

  return (
    <AdvancedCheckbox
      value={checked}
      onValueChange={setChecked}
      label="Agree to terms"
      checkedColor="#007AFF"
      uncheckedColor="#ccc"
      size={24}
    />
  );
};

export default App;

👥 Checkbox Group Example

import React, { useState } from 'react';
import { View } from 'react-native';
import { CheckboxGroup, AdvancedCheckbox } from 'react-native-advanced-checkbox';

const App = () => {
  const [selectedValues, setSelectedValues] = useState<string[]>(['option1']);

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <CheckboxGroup onValueChange={setSelectedValues}>
        <AdvancedCheckbox value="option1" label="Option 1" checkedColor="#FF6347" />
        <AdvancedCheckbox value="option2" label="Option 2" checkedColor="#FF6347" />
        <AdvancedCheckbox value="option3" label="Option 3" checkedColor="#FF6347" />
      </CheckboxGroup>
    </View>
  );
};

export default App;

⚙️ Advanced Customization

<AdvancedCheckbox
  value={checked}
  onValueChange={setChecked}
  label="Custom Checkbox"
  labelPosition="left"
  checkedColor="#28a745"
  uncheckedColor="#6c757d"
  size={30}
  animationType="rotate"
  checkBoxStyle={{ borderRadius: 8 }}
  labelStyle={{ fontSize: 18, color: '#333' }}
  testID="custom-checkbox"
  accessibilityLabel="Toggle custom option"
  accessibilityHint="Toggles the custom checkbox on or off"
/>

📋 Props

AdvancedCheckbox

CheckboxGroup

🎨 Customization Tips

// Custom images and you can call image url also here
<AdvancedCheckbox
  checkedImage={require('./checked.png')} 
  uncheckedImage={require('./unchecked.png')}
/>

// Custom colors and style
<AdvancedCheckbox
  checkedColor="#FF6347"
  uncheckedColor="#6c757d"
  checkBoxStyle={{ borderRadius: 10, borderWidth: 2 }}
/>

// Custom checkmark content
<AdvancedCheckbox
  checkMarkContent={<Text style={{ color: '#fff' }}>✔</Text>}
/>

🤝 Contributing

We welcome contributions! Check out our CONTRIBUTING.md for details.

⚠️ All development work must be submitted as a pull request to the dev branch. Pull requests targeting main will be rejected or closed.

📜 Code of Conduct

Read our CODE_OF_CONDUCT.md to help maintain a welcoming community.

📄 License

MIT © Sujeet Kumar
See LICENSE for full details.

🛠 Support & Feedback

Found a bug or have a feature request?
Please open an issue on GitHub.