# react-native-checkbox

A simple, customizable, and lightweight **Checkbox** component for React Native apps.  
Built with ❤️ by **Narendra Kumar**.

---

## 🚀 Installation

```bash
npm install nkrn-checkbox
# or
yarn add nkrn-checkbox

📦 Import

import Checkbox from 'nkrn-checkbox';

💻 Usage Example

import React, { useState } from 'react';
import { View, Text } from 'react-native';
import Checkbox from 'nkrn-checkbox';

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

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Checkbox
        label="Accept Terms & Conditions"
        checked={checked}
        onChange={setChecked}
        color="#007bff"
        size={24}
      />

      <Text style={{ marginTop: 10 }}>
        {checked ? 'Checked ✅' : 'Unchecked ❌'}
      </Text>
    </View>
  );
}

⚙️ Props Reference

Implementation note: this component maintains internal state initialized from the checked prop. On every toggle it updates internal state and calls onChange(newValue). If you pass checked from a parent and update it in onChange, the parent and component will stay in sync. For a strictly controlled component (where the component always reflects the checked prop even if changed externally), update the component to watch checked via useEffect.

| Prop | Type | Default | Required | Description | | ---------------- | -------------------------- | ----------: | :-------------------: | ------------------------------------------------------------------------------------------------------------------------------------------- | | label | string | "" | No | Optional label text shown beside the checkbox. | | checked | boolean | false | No* | Initial checked state. See implementation note above. | | onChange | (value: boolean) => void | undefined | Yes (recommended) | Called when the checkbox toggles; receives the new boolean value. Use this to update parent state. | | size | number | 24 | No | Size in pixels for the checkbox square (width & height). | | color | string | #007BFF | No | Color used when the checkbox is checked (tick / fill). | | disabled | boolean | false | No | If true, taps are ignored and the checkbox shows a disabled state (not implemented by default — see note). | | labelStyle | TextStyle | {} | No | Custom style object for the label Text. (If your component doesn't accept this yet, consider adding it to support custom fonts/coloring.) | | containerStyle | ViewStyle | {} | No | Custom style for the outer container View. |

• checked is used to initialize state. The component will call onChange every toggle so the parent can keep the value in sync.

🔧 Examples of Prop Usage

No label (only box)

<Checkbox checked={false} onChange={() => {}} />

Custom size & color

<Checkbox label="Large orange box" size={32} color="#FF5722" onChange={val => console.log(val)} />

Controlled-like usage (parent updates state)

const [val, setVal] = useState(false);
<Checkbox checked={val} onChange={setVal} />;

🛠️ Additions You Might Want to Implement

If you want to make the component more feature-rich, consider adding:

• disabled rendering (a different style when disabled)
• labelStyle & containerStyle support
• Accessibility props (accessibilityLabel, accessible, accessibilityState)
• Support for custom tick icon (e.g., allow icon prop)
• A checkedIcon/uncheckedIcon prop for custom visuals
• TypeScript definitions (index.d.ts)

If you want, I can give the exact code changes to add any of these features.

📜 License

MIT © 2025 Narendra Kumar

---