Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/wrathchaos/react-native-bouncy-checkbox
Fully customizable animated bouncy checkbox for React Native
https://github.com/wrathchaos/react-native-bouncy-checkbox
android bounce bouncy-checkbox checkbox customizable-ui freakycoder ios javascript mobile mobile-app react react-native reactjs
Last synced: 6 days ago
JSON representation
Fully customizable animated bouncy checkbox for React Native
- Host: GitHub
- URL: https://github.com/wrathchaos/react-native-bouncy-checkbox
- Owner: WrathChaos
- License: mit
- Created: 2019-10-12T18:40:48.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2025-01-14T03:56:38.000Z (8 days ago)
- Last Synced: 2025-01-14T11:47:43.340Z (8 days ago)
- Topics: android, bounce, bouncy-checkbox, checkbox, customizable-ui, freakycoder, ios, javascript, mobile, mobile-app, react, react-native, reactjs
- Language: TypeScript
- Homepage: https://freakycoder.com
- Size: 73.9 MB
- Stars: 797
- Watchers: 7
- Forks: 58
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
[](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:
Zero Dependency 🥳
### React Native
```shell
npm i react-native-bouncy-checkbox
```
## 🥳 Version 4.1.2 is here 🚀
- **Complete re-written with Modern Functional Component**
- Fully Refactored with React Hooks
- Imperative Handle Support
- **Checkbox is controllable with `isChecked` prop**
- `onLongPress` support
- `testID` support
- Finally, get rid of `disableBuiltInState` prop
- Cool customizable animation options
- Control your own check state with `useBuiltInState` to disable
- Typescript
- Community Supported Stable Version
## Import
```js
import BouncyCheckbox from "react-native-bouncy-checkbox";
```
# Usage
## Basic Usage
```js
{}} />
```
## Advanced Custom Usage
```tsx
{console.log(isChecked)}}
/>
```
## Disable Built-In State
To fully control checkbox state outside with your own state, just set `useBuiltInState` to `false` and send your state value to `isChecked` prop
```tsx
const [localChecked, setLocalChecked] = React.useState(false);
{
// These two should be same value
console.log('::Checked::', checked);
console.log('::LocalChecked::', localChecked);
setLocalChecked(!localChecked);
}}
/>
```
### Configuration - Props
| Property | Type | Default | Description |
|----------------------| :-------: |:-------------:|------------------------------------------------------------------------------------------------------------------------------------------------|
| **isChecked** | **boolean** | **undefined** | **if you want to control check state yourself, you can use `isChecked` prop now!** |
| onPress | function | null | set your own onPress functionality after the bounce effect, callback receives the next `isChecked` boolean if disableBuiltInState is false |
| onLongPress | function | null | set your own onLongPress functionality after the bounce effect, callback receives the next `isChecked` boolean if disableBuiltInState is false |
| text | string | undefined | set the checkbox's text |
| textComponent | component | undefined | set the checkbox's text by a React Component |
| disableText | boolean | false | if you want to use checkbox without text, you can enable it |
| useBuiltInState | boolean | false | to fully control the checkbox itself outside with your own state, just set to `false` and send your state value to `isChecked` prop |
| 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 outer icon container style |
| innerIconStyle | style | default | set/override the inner icon container style |
| fillColor | color | #f09f48 | change the checkbox's filled color |
| unfillColor | color | transparent | change the checkbox's un-filled color when it's not checked |
| iconComponent | component | Icon | set your own icon component |
| checkIconImageSource | image | default | set your own check icon image |
| textContainerStyle | ViewStyle | default | set/override the text container style |
| ImageComponent | component | Image | set your own Image component instead of RN's default Image |
| TouchableComponent | Component | Pressable | set/override the main TouchableOpacity component with any Touchable Component like Pressable |
### Animation Configurations
| Property | Type | Default | Description |
| ----------------- | :----: | :-----: | ----------------------------------------- |
| bounceEffectIn | number | 0.9 | change the bounce effect when press in |
| bounceEffectOut | number | 1 | change the bounce effect when press out |
| bounceVelocityIn | number | 0.1 | change the bounce velocity when press in |
| bounceVelocityOut | number | 0.4 | change the bounce velocity when press out |
| bouncinessIn | number | 20 | change the bounciness when press in |
| bouncinessOut | number | 20 | change the bounciness when press out |
## Synthetic Press Functionality with Manual Controlling State
Please check the `example` runnable project to how to make it work on a real project.
- The `onPress` callback **WILL RECEIVE** the next `isChecked` when using `ref` is used.
- You MUST set the `isChecked` prop to use your own check state manually.
Here is the basic implementation:
```tsx
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 (
Synthetic Checkbox
Control Checkbox with Another Button
{
Alert.alert(`Checked:: ${isChecked}`);
}}
/>
{
if (bouncyCheckboxRef.current) {
bouncyCheckboxRef.current.onCheckboxPress();
}
}}>
Change Checkbox
);
};
const styles = StyleSheet.create({});
export default App;
```
Another example with `isChecked` prop:
```tsx
import React, {useRef} from 'react';
import {ImageBackground, StyleSheet, Text, View} from 'react-native';
import RNBounceable from '@freakycoder/react-native-bounceable';
import BouncyCheckbox, {BouncyCheckboxHandle} from './build/dist';
const App = () => {
const bouncyCheckboxRef = useRef(null);
const [checkboxState, setCheckboxState] = React.useState(false);
return (
{`Check Status: ${checkboxState.toString()}`}
setCheckboxState(!checkboxState)}
/>
{
bouncyCheckboxRef.current?.onCheckboxPress();
}}>
Synthetic Checkbox Press
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
stateContainer: {
height: 45,
width: 175,
alignItems: 'center',
justifyContent: 'center',
borderRadius: 12,
marginBottom: 12,
},
stateTextStyle: {
color: '#fff',
fontWeight: 'bold',
},
syntheticButton: {
height: 50,
marginTop: 64,
borderRadius: 12,
width: '60%',
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#00C0EE',
},
iconImageStyle: {
width: 20,
height: 20,
},
textStyle: {
color: '#010101',
fontWeight: '600',
},
});
export default App;
````
## [React Native Bouncy Checkbox Group](https://github.com/WrathChaos/react-native-bouncy-checkbox-group)
We have also this library's checkbox group library as well 🍻 Please take a look 😍
## FAQ
How to disable strikethrough?
- Simply use the `textStyle` prop and set the `textDecorationLine` to `none`
```tsx
textStyle={{
textDecorationLine: "none",
}}
```
How to make square checkbox?
- Simply use the `iconStyle` prop and set the `borderRadius` to `0`
```tsx
innerIconStyle={{
borderRadius: 0, // to make it a little round increase the value accordingly
}}
```
How to use multiple checkbox and control all of them with one checkbox?
- You can use `isChecked` prop to control all of them one by one and with simple handling function to make them all checked or not
```tsx
const data = [
{
id: 0,
isChecked: false,
},
{
id: 1,
isChecked: false,
},
{
id: 2,
isChecked: false,
},
]
const [checkBoxes, setCheckBoxes] = useState(data);
const handleCheckboxPress = (checked: boolean, id: number) => {
if (id === 0) {
setCheckBoxes(
checkBoxes.map(item => ({
...item,
isChecked: checked,
})),
);
return;
}
setCheckBoxes(
checkBoxes.map(item =>
item.id === id ? {...item, isChecked: checked} : item,
),
);
};
```
Please check out the example for this:
https://github.com/WrathChaos/react-native-bouncy-checkbox-check-all-with-one-checkbox
### Future Plans
- [x] ~~LICENSE~~
- [x] ~~Typescript Challange!~~
- [x] ~~Version 2.0.0 is alive 🥳~~
- [x] ~~Synthetic Press Functionality~~
- [x] ~~Disable built-in check state~~
- [x] ~~React Native Bouncy Checkbox Group Library Extension~~
- [x] ~~New Animation and More Customizable Animation~~
- [x] ~~Version 3.0.0 is alive 🚀~~
- [x] ~~Better Documentation~~
- [x] ~~Version 4.0.0 is alive 🚀~~
- [x] ~~Get rid of `disableBuiltInState` prop~~
- [ ] Write an article about the lib on Medium
## Credits
Photo by Milad Fakurian on Unsplash
## Author
FreakyCoder, [email protected]
## License
React Native Bouncy Checkbox is available under the MIT license. See the LICENSE file for more info.