forked from craftzdog/react-native-animated-todo
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
5 changed files
with
56 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,55 @@ | ||
# 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: [<img src="./doc/youtube.png" width="32" />](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/) |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.