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

👾 How to build a smoothly animated ToDo app with React Native, Expo, Reanimated, NativeBase, and Moti ❤️
https://github.com/manuelduarte077/react-native-animated-todo

animated expo moti native-base react-native typescript

Last synced: 2 days ago
JSON representation

👾 How to build a smoothly animated ToDo app with React Native, Expo, Reanimated, NativeBase, and Moti ❤️

• Host: GitHub
• URL: https://github.com/manuelduarte077/react-native-animated-todo
• Owner: manuelduarte077
• License: mit
• Created: 2021-11-22T04:56:39.000Z (almost 3 years ago)
• Default Branch: main
• Last Pushed: 2022-06-04T03:17:54.000Z (over 2 years ago)
• Last Synced: 2023-03-05T16:38:12.281Z (over 1 year ago)
• Topics: animated, expo, moti, native-base, react-native, typescript
• Language: TypeScript
• Homepage:
• Size: 2.81 MB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Smoothly Animated ToDo App built with React Native

![Todo ScreenShots](./doc/home.png) | ![Todo ScreenShots](./doc/sidebar.png) | ![Todo ScreenShots](./doc/about.png) 

-----------------------------------|------------------------------------|-----------------------------------

home                               | sidebar                            | about                             

![Todo ScreenShots](./doc/home-light.png) | ![Todo ScreenShots](./doc/sidebar-light.png) | ![Todo ScreenShots](./doc/about-light.png) 

-----------------------------------|------------------------------------|-----------------------------------

## 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

```

## How to dev

This project can be run from the Expo client app.

```sh

yarn

yarn start

```