[](https://github.com/WrathChaos/react-native-bouncy-checkbox)
[](https://github.com/WrathChaos/react-native-bouncy-checkbox)
[](https://www.npmjs.com/package/react-native-bouncy-checkbox)
[](https://www.npmjs.com/package/react-native-bouncy-checkbox)
[](https://opensource.org/licenses/MIT)
[](https://github.com/prettier/prettier)
|
|
## Installation
Add the dependency:
### React Native
```ruby
npm i react-native-bouncy-checkbox
```
## Version 2.0.0 is Here 🥳
- Typescript
- **Zero Dependency**
- More Customization Options
- New customization props are available:
- `iconStyle`
- `bounceEffect`
- `bounceFriction`
## Import
```js
import BouncyCheckbox from "react-native-bouncy-checkbox";
```
# Usage
## Basic Usage
```js
{}} />
```
## Advanced Custom Usage
```jsx
{}}
/>
```
### Configuration - Props
| Property | Type | Default | Description |
| -------------------- | :-------: | :------------: | ----------------------------------------------------------- |
| text | string | undefined | set the checkbox's text |
| onPress | function | null | set your own onPress functionality after the bounce effect |
| disableText | boolean | false | if you want to use checkbox without text, you can enable it |
| size | number | 25 | size of `width` and `height` of the checkbox |
| style | style | default | set/override the container style |
| textStyle | style | default | set/override the text style |
| iconStyle | style | default | set/override the icon style |
| isChecked | boolean | false | set the default checkbox value |
| fillColor | color | #f09f48 | change the checkbox's filled color |
| unfillColor | color | transparent | change the checkbox's un-filled color when it's not checked |
| useNativeDriver | boolean | true | enable/disable the useNativeDriver for animation |
| iconComponent | component | Icon | set your own icon component |
| checkIconImageSource | image | default | set your own check icon image |
| ImageComponent | component | Image | set your own Image component instead of RN's default Image |
| bounceEffect | number | 1 | change the bounce effect |
| bounceFriction | number | 3 | change the bounce friction |
## Synthetic Press Functionality with Manual Check State
Please check the `example-manual-state` runable project to how to make it work on a real project.
Becareful while using `disableBuiltInState` you MUST set the `isChecked` prop to use your own check state manually.
Here is the basic implementation:
```jsx
import React from "react";
import {
SafeAreaView,
StyleSheet,
Text,
TouchableOpacity,
View,
} from "react-native";
import BouncyCheckbox from "./lib/BouncyCheckbox";
import RNBounceable from "@freakycoder/react-native-bounceable";
const App = () => {
let bouncyCheckboxRef: BouncyCheckbox | null = null;
const [checkboxState, setCheckboxState] = React.useState(false);
return (
{`Check Status: ${checkboxState.toString()}`}
(bouncyCheckboxRef = ref)}
isChecked={checkboxState}
text="Synthetic Checkbox"
disableBuiltInState
onPress={(isChecked: boolean = false) =>
setCheckboxState(!checkboxState)
}
/>
bouncyCheckboxRef?.onPress()}
>
Synthetic Checkbox Press
);
};
const styles = StyleSheet.create({});
export default App;
```
### Future Plans
- [x] ~~LICENSE~~
- [x] ~~Typescript Challange!~~
- [x] ~~Version 2.0.0 is alive 🥳~~
- [x] ~~Synthetic Press Functionality~~
- [x] ~~Disable built-in check state~~
- [ ] Write an article about the lib on Medium
## Author
FreakyCoder, kurayogun@gmail.com
## License
React Native Bouncy Checkbox is available under the MIT license. See the LICENSE file for more info.
