nkrn-checkbox/README.md

````markdown # react-native-checkbox

````markdown
# 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

```javascript
import Checkbox from 'nkrn-checkbox';

```

---


## 💻 Usage Example

```jsx
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)

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

### Custom size & color

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

### Controlled-like usage (parent updates state)

```jsx
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

```

---