React Native Smart Checkbox

A lightweight, fully customizable React Native checkbox component with:

• ✅ No image assets
• ✅ No icon dependencies
• ✅ Dynamic sizing
• ✅ Theme support
• ✅ TypeScript support
• ✅ iOS & Android compatible

Installation

npm install react-native-smart-checkbox

or

yarn add react-native-smart-checkbox

Usage

import React, { useState } from "react";
import { View } from "react-native";
import { CustomCheckbox } from "react-native-smart-checkbox";

export default function App() {
  const [checked, setChecked] = useState(false);

  return (
    <View>
      <CustomCheckbox
        checked={checked}
        onPress={() => setChecked(!checked)}
      />
    </View>
  );
}

Theme Example

<CustomCheckbox
  checked={checked}
  onPress={() => setChecked(!checked)}
  checkedBackgroundColor="#4F46E5"
  checkedBorderColor="#4F46E5"
  uncheckedBackgroundColor="#FFFFFF"
  uncheckedBorderColor="#D1D5DB"
  checkmarkColor="#FFFFFF"
/>

Dynamic Size Example

<CustomCheckbox
  checked={checked}
  onPress={() => setChecked(!checked)}
  size={16}
/>

<CustomCheckbox
  checked={checked}
  onPress={() => setChecked(!checked)}
  size={24}
/>

<CustomCheckbox
  checked={checked}
  onPress={() => setChecked(!checked)}
  size={40}
/>

Props

| Prop | Type | Default | Description | |--------|------|---------|-------------| | checked | boolean | false | Checkbox state | | onPress | () => void | Required | Callback when checkbox is pressed | | size | number | 20 | Checkbox size | | style | ViewStyle | undefined | Custom container style | | disabled | boolean | false | Disable checkbox interaction | | checkedBackgroundColor | string | #007AFF | Background color when checked | | uncheckedBackgroundColor | string | transparent | Background color when unchecked | | checkedBorderColor | string | #007AFF | Border color when checked | | uncheckedBorderColor | string | #C7C7CC | Border color when unchecked | | checkmarkColor | string | #FFFFFF | Checkmark color |

TypeScript

import {
  CustomCheckbox,
  type CustomCheckboxProps,
} from "react-native-smart-checkbox";

Example

import React, { useState } from "react";
import { View } from "react-native";
import { CustomCheckbox } from "react-native-smart-checkbox";

export default function Example() {
  const [checked, setChecked] = useState(false);

  return (
    <View>
      <CustomCheckbox
        checked={checked}
        onPress={() => setChecked(!checked)}
        size={28}
        checkedBackgroundColor="#22C55E"
        checkedBorderColor="#22C55E"
        uncheckedBorderColor="#CBD5E1"
        checkmarkColor="#FFFFFF"
      />
    </View>
  );
}

NPM Usage

• Install from npm:

npm install react-native-smart-checkbox

• Publish as public:

npm publish --access public

• Install from a local tarball (useful for testing a packaged module):

npm pack
npm install ./react-native-smart-checkbox-0.0.1.tgz

Changing Color & Size

You can customize each checkbox instance using props. Examples below show different colors and sizes.

<CustomCheckbox
  checked={checked}
  onPress={() => setChecked(!checked)}
  size={16}
  checkedBackgroundColor="#EF4444"
  checkedBorderColor="#EF4444"
  checkmarkColor="#FFFFFF"
/>

<CustomCheckbox
  checked={checked}
  onPress={() => setChecked(!checked)}
  size={28}
  checkedBackgroundColor="#0EA5E9"
  checkedBorderColor="#0EA5E9"
  checkmarkColor="#FFFFFF"
/>

<CustomCheckbox
  checked={checked}
  onPress={() => setChecked(!checked)}
  size={40}
  checkedBackgroundColor="#10B981"
  checkedBorderColor="#10B981"
  checkmarkColor="#FFFFFF"
/>

Multiple Checkboxes

Use an array or object in state to manage multiple checkboxes. This example shows a list of options with independent states:

import React, { useState } from 'react';
import { View } from 'react-native';
import { CustomCheckbox } from 'react-native-smart-checkbox';

export default function MultiExample() {
  const items = [
    { id: 'a', label: 'Option A', color: '#EF4444' },
    { id: 'b', label: 'Option B', color: '#0EA5E9' },
    { id: 'c', label: 'Option C', color: '#10B981' },
  ];

  const [checkedMap, setCheckedMap] = useState<Record<string, boolean>>({});

  const toggle = (id: string) => {
    setCheckedMap((s) => ({ ...s, [id]: !s[id] }));
  };

  return (
    <View>
      {items.map((it) => (
        <CustomCheckbox
          key={it.id}
          checked={!!checkedMap[it.id]}
          onPress={() => toggle(it.id)}
          label={it.label}
          labelPosition="right"
          checkedBackgroundColor={it.color}
          checkedBorderColor={it.color}
          size={20}
          style={{ marginBottom: 10 }}
        />
      ))}
    </View>
  );
}

Requirements

• React Native >= 0.70
• React >= 18

License

MIT