JairajJangle/react-native-checkbox

A papery checkbox for react native

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.

• ✨ 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

yarn add @futurejj/react-native-checkbox
# or
npm install @futurejj/react-native-checkbox

This component uses Material Community Icons. You'll need to install either:

• @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)

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 (
    <View style={{ padding: 20 }}>
      <Checkbox
        status={checked ? 'checked' : 'unchecked'}
        onPress={toggleCheckbox}
      />
    </View>
  );
}

<Checkbox
  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
/>

The checkbox includes smooth animations:

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

This component is built with accessibility in mind:

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

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

MIT

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