@futurejj/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.

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

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

Icon Dependencies

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)

Usage

Basic Example

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>
  );
}

Customization

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

API Reference

Props

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<ViewStyle>	-	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