Component

Animated Checkbox

A checkbox that fills and pops a checkmark when toggled.

Preview

How to use AI prompt

How to use

Minimal, copy-pasteable code.

Agree.tsx

import { useState } from "react";
import { AnimatedCheckbox } from "react-native-foonto";

export function Agree() {
  const [checked, setChecked] = useState(false);

  return (
    <AnimatedCheckbox
      checked={checked}
      onChange={setChecked}
      color="#6d28d9"
      size={28}
    />
  );
}

Props

Prop	Type	Default	Description
`checked`req	`boolean`	—	Whether the box is checked.
`onChange`	`(checked: boolean) => void`	—	Called with the next checked value on press.
`size`	`number`	28	Edge length of the box in px.
`color`	`string`	'#6d28d9'	Fill + border color when checked.
`borderColor`	`string`	'#c4c4cc'	Border color when unchecked.
`checkColor`	`string`	'#ffffff'	Color of the checkmark.
`duration`	`number`	180	Animation duration in ms.
`disabled`	`boolean`	false	Disable interaction and dim the box.
`style`	`FoontoStyle`	—	Style for the pressable.

AI prompt

Install the library, then paste this into your AI coding agent to wire it up.

AI prompt

Add an animated checkbox using the `react-native-foonto` library.

1. Make sure `react-native-foonto` and `react-native-reanimated` are installed.
2. Import `AnimatedCheckbox` from `react-native-foonto`.
3. Hold the checked state with `useState` and pass `checked` + `onChange`.
4. Set `color` to your brand color and `size` to fit the row.
5. For a to-do list, render one per row and strike through the label when checked.