Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/craftzdog/react-native-checkbox-reanimated
Animated checkbox built with Reanimated v2
https://github.com/craftzdog/react-native-checkbox-reanimated
react-native ui
Last synced: 4 days ago
JSON representation
Animated checkbox built with Reanimated v2
- Host: GitHub
- URL: https://github.com/craftzdog/react-native-checkbox-reanimated
- Owner: craftzdog
- License: mit
- Created: 2021-11-14T07:27:55.000Z (almost 3 years ago)
- Default Branch: master
- Last Pushed: 2022-11-16T01:12:44.000Z (almost 2 years ago)
- Last Synced: 2024-10-26T20:38:26.054Z (18 days ago)
- Topics: react-native, ui
- Language: TypeScript
- Homepage: https://youtu.be/k2h7usLLBhY
- Size: 778 KB
- Stars: 168
- Watchers: 7
- Forks: 26
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# react-native-checkbox-reanimated
Animated checkbox built with Reanimated v2.
This component has been created for [the React Native tutorial here](https://github.com/craftzdog/react-native-animated-todo).
## Prerequisites
- [React Native Reanimated](https://docs.swmansion.com/react-native-reanimated/)
- [React Native SVG](https://github.com/react-native-svg/react-native-svg)
## Installation
```sh
npm install react-native-checkbox-reanimated
npm install react-native-reanimated react-native-svg
```
When you're done installing `react-native-reanimated` don't forget to add the plugin to your `babel.config.js` file. Like so:
```js
module.exports = {
presets: [
...
],
plugins: [
...
'react-native-reanimated/plugin',
],
};
```
make sure the `react-native-reanimated/plugin` is added last.
Please make sure that you give the [React Native Reanimated Documentation](https://docs.swmansion.com/react-native-reanimated/) a read.
Please take note that in most cases while using this package with expo, the version of expo that you have installed will not be compatible with the latest version of the `react-native-reanimated` package and the `react-native-svg` package so if you get an error like so:
```sh
Some dependencies are incompatible with the installed expo package version:
- react-native-reanimated - expected version: ~2.9.1 - actual version installed: 2.10.0
- react-native-svg - expected version: 12.3.0 - actual version installed: 13.1.0
Your project may not work correctly until you install the correct versions of the packages.
To install the correct versions of these packages, please run: expo doctor --fix-dependencies,
or install individual packages by running expo install [package-name ...]
```
make sure you run the recommended `expo doctor --fix-dependencies` command to fix it and clear any errors you might have while using this package.
## Usage
```typescript
import React, { useState } from 'react'
import { StyleSheet, View, Pressable } from 'react-native'
import AnimatedCheckbox from 'react-native-checkbox-reanimated'
export default function App() {
const [checked, setChecked] = useState(false)
const handleCheckboxPress = () => {
setChecked(prev => {
return !prev
})
}
return (
)
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center'
},
checkbox: {
width: 64,
height: 64
}
})
```
## License
[MIT](./LICENSE)
---
Looking for a Markdown note-taking app? Check out my app called Inkdrop:
[](https://www.inkdrop.app/)