@futurejj/react-native-checkbox NPM

@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