https://github.com/craftzdog/react-native-animated-todo

Animated ToDo app built with React Native and Reanimated v2
https://github.com/craftzdog/react-native-animated-todo

react-native react-native-reanimated tutorial ui

Last synced: 3 days ago
JSON representation

Animated ToDo app built with React Native and Reanimated v2

• Host: GitHub
• URL: https://github.com/craftzdog/react-native-animated-todo
• Owner: craftzdog
• Created: 2021-11-10T02:20:34.000Z (about 3 years ago)
• Default Branch: master
• Last Pushed: 2024-08-07T15:38:46.000Z (5 months ago)
• Last Synced: 2024-12-15T00:02:26.845Z (10 days ago)
• Topics: react-native, react-native-reanimated, tutorial, ui
• Language: TypeScript
• Homepage: https://youtu.be/k2h7usLLBhY
• Size: 2.38 MB
• Stars: 454
• Watchers: 9
• Forks: 102
• Open Issues: 6
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Smoothly Animated ToDo App built with React Native

![Thumbnail](./doc/thumb.jpg)

Try the demo on [![Expo Go](./doc/expo-logo.svg)](https://expo.dev/@craftzdog/animated-todo)

The animated checkbox component has been published as [an NPM module `react-native-checkbox-reanimated`](https://github.com/craftzdog/react-native-checkbox-reanimated).

![demo](./doc/checkbox.gif)

## Tutorial

Watch how I built this website on YouTube: [](https://youtu.be/k2h7usLLBhY)

## Stack

- [React Native](https://reactnative.dev/) - ReactJS-based framework that can use native platform capabilities

- [Expo](https://expo.dev/) - Toolset for building and delivering RN apps

- [React Navigation(v6)](https://reactnavigation.org/) - Routing and navigation

- [NativeBase(v3)](https://nativebase.io/) - Themable component library

- [React Native Reanimated](https://docs.swmansion.com/react-native-reanimated/) - Animations

- [React Native SVG](https://github.com/react-native-svg/react-native-svg) - Drawing SVG

- [Moti](https://moti.fyi/) - Helper module for Reanimated 2

## Project structure

```

$PROJECT_ROOT

├── App.tsx        # Entry point

└── src

    ├── screens    # Screen components

    ├── components # UI components

    ├── utils      # Custom hooks and helpers

    └── assets     # Image files

```

## Credits

- [SALY 3D Illustration Pack](https://www.figma.com/community/file/890095002328610853)

- [Animated SVG stroke example by William Candillon](https://github.com/wcandillon/can-it-be-done-in-react-native/tree/master/reanimated-2/src/StrokeAnimation)

## How to dev

This project can be run from the Expo client app.

```sh

yarn

yarn start

```

---

Looking for a Markdown note-taking app? Check out my app called Inkdrop:

[![Inkdrop](https://github.com/craftzdog/dotfiles-public/raw/master/images/inkdrop.png)](https://www.inkdrop.app/)