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:
Download Details:
Author: craftzdog
Live Demo: View The Demo
Download Link: Download The Source Code
Official Website: https://github.com/craftzdog/react-native-checkbox-reanimated
License: MIT