@futurejj/react-native-checkbox

A papery checkbox for react native

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

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.

Package detail