Animated Checkbox With Reanimated v2

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