# react-native-circle-checkbox-with-icon

> Iconified Checkbox for react native to work with Android and IOS. Icons are from Fontisto library

Latest version **1.0.5** (published 2021-09-14) · ISC license · 0 weekly downloads

## Install

```sh
npm install react-native-circle-checkbox-with-icon
pnpm add react-native-circle-checkbox-with-icon
yarn add react-native-circle-checkbox-with-icon
bun add react-native-circle-checkbox-with-icon
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.5 |
| Published | 2021-09-14 |
| First published | 2021-09-14 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 6.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Plum systems |
| Maintainers | plumsystems |
| Keywords | Icon, checkbox |

## Links

- npm: https://www.npmjs.com/package/react-native-circle-checkbox-with-icon
- Repository: http://gitlab.plum.systems:8888/root/react-native-circle-checkbox-with-icon-public
- npm.io page: https://npm.io/package/react-native-circle-checkbox-with-icon

## Dependencies (2)

- [prop-types](https://npm.io/package/prop-types.md) latest
- [react-native-vector-icons](https://npm.io/package/react-native-vector-icons.md) latest

## Alternatives

- [@fortawesome/react-fontawesome](https://npm.io/package/@fortawesome/react-fontawesome.md) — 2.2M weekly downloads
- [roboto-fontface](https://npm.io/package/roboto-fontface.md) — 196.0K weekly downloads
- [@react-native-vector-icons/common](https://npm.io/package/@react-native-vector-icons/common.md) — 150.4K weekly downloads
- [@procore/core-icons](https://npm.io/package/@procore/core-icons.md) — 4.6K weekly downloads
- [@react-md/material-icons](https://npm.io/package/@react-md/material-icons.md) — 1.6K weekly downloads

## Recent versions

- 1.0.5 (latest) — 2021-09-14
- 1.0.4 — 2021-09-14
- 1.0.3 — 2021-09-14
- 1.0.2 — 2021-09-14
- 1.0.1 — 2021-09-14
- 1.0.0 — 2021-09-14

## README

Example code


import { StatusBar } from 'expo-status-bar';
import React, {useState} from 'react';
import { StyleSheet, Text, View } from 'react-native';
import CircleCheckBox, {LABEL_POSITION} from 'react-native-circle-checkbox';

export default function App() {
    //store value of checkbox
    
  const [checked,setChecked]=useState(false);

  const toggleSwitch1 = (value) => {
    //onValueChange of the chechbox this function will be called

    setChecked((previousState) => !previousState);

    console.log(value);
    

    //state changes according to switch
    //which will result in re-render the text
  };

  return (
    <View style={styles.container}>
      <CircleCheckBox
        checked={checked}
        outerSize={100}
        innerSize={95}
        filterSize={90}
        unCheckedColor= '#fc2384',
        checkedColor='#CD0923',
        outerColor='#0C9527'
        innerColor="#FC9527"
        filterColor = '#FFFFFF'
        onToggle={(checked) => toggleSwitch1(checked)}
        labelPosition={LABEL_POSITION.BOTTOM}
        styleLabel= {{}}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});


JSX props to follow shrtly

---
_Source: https://npm.io/package/react-native-circle-checkbox-with-icon · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._