Description:
Animated Checkbox created with React Native SVG and React Native Reanimated.
How to use it:
1. Install and import the animated checkbox component.
# NPM $ npm i react-native-checkbox-reanimated
import React, { useState } from 'react'
import { StyleSheet, View, Pressable } from 'react-native'
import AnimatedCheckbox from 'react-native-checkbox-reanimated'2. This example shows how to create a custom animated checkbox.
export default function App() {
const [checked, setChecked] = useState<boolean>(false)
const handleCheckboxPress = () => {
setChecked(prev => {
return !prev
})
}
return (
<View style={styles.container}>
<Pressable onPress={handleCheckboxPress} style={styles.checkbox}>
<AnimatedCheckbox
checked={checked}
highlightColor="#4444ff"
checkmarkColor="#ffffff"
boxOutlineColor="#4444ff"
/>
</Pressable>
</View>
)
}Preview:
