> For the complete documentation index, see [llms.txt](https://jinyoungjoh.gitbook.io/react-native-just-checkbox/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://jinyoungjoh.gitbook.io/react-native-just-checkbox/getting-started.md).

# Getting Started

### Installation

First, install the package:

{% tabs %}
{% tab title="npm " %}

```bash
npm install react-native-just-checkbox
```

{% endtab %}

{% tab title="yarn" %}

```bash
yarn add react-native-just-checkbox
```

{% endtab %}
{% endtabs %}

### Quick Start

```tsx
import React, { useState } from 'react';
import { StyleSheet, Text, View } from "react-native";
import { CheckBox } 'react-native-just-checkbox';

export default function App() {
  const [isChecked, setIsChecked] = useState(false);

  return (
    <View style={styles.container}>
      <CheckBox isChecked={isChecked} onPress={() => setIsChecked(!isChecked)} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fefefe",
    justifyContent: "center",
    paddingHorizontal: 50,
  }
});

```

### Props

<table><thead><tr><th width="208">Prop</th><th>Type</th><th>Description</th><th>Default</th></tr></thead><tbody><tr><td><code>isChecked</code></td><td><code>boolean</code></td><td>Whether the checkbox is checked or not.</td><td>-</td></tr><tr><td><code>isDisabled</code></td><td><code>boolean</code></td><td>Whether the checkbox is disabled or not. Disabled checkboxes will not trigger touch events and their opacity will be set to 0.2.</td><td><code>false</code></td></tr><tr><td><code>checkBoxSize</code></td><td><code>number</code></td><td>The size of the checkbox (applied to both width and height).</td><td><code>20</code></td></tr><tr><td><code>checkColor</code></td><td><code>string</code></td><td>The color of the checkmark.</td><td><code>#1a1a1a</code></td></tr><tr><td><code>animationType</code></td><td><code>"bounce" | "opacity" | "none"</code></td><td>The animation type for the checkbox.</td><td><code>"none"</code></td></tr><tr><td><code>fillMode</code></td><td><code>boolean</code></td><td>Whether to fill the background of the CheckBox.</td><td><code>false</code></td></tr><tr><td><code>fillColor</code></td><td><code>string</code></td><td>The background fill color of the CheckBox.</td><td>-</td></tr><tr><td><code>borderWidth</code></td><td><code>number</code></td><td>The border width of the CheckBox.</td><td><code>1.5</code></td></tr><tr><td><code>borderRadius</code></td><td><code>number</code></td><td>The border radius of the CheckBox.</td><td><code>checkBoxSize</code></td></tr><tr><td><pre><code>onPress
</code></pre></td><td><code>() => void</code></td><td>Function called when the checkbox is pressed.</td><td>-</td></tr></tbody></table>