1.0.9 • Published 1 week ago

@futurejj/react-native-checkbox

Licence

MIT

Version

1.0.9

Deps

Size

32 kB

Vulns

Weekly

Stars

Summary Dependency Versions

@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