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

Опубликовано: 28 Сентябрь 2024
на канале: devaslife

386,981

11k

Hello. I'm Takuya Matsuyama from Japan, an indie developer making a Markdown note-taking app called Inkdrop.
I've learned how to create animated components on React Native by building a simple ToDo app.
I hope you enjoy it!

▶ Check out my product: Inkdrop - Markdown note-taking app
https://www.inkdrop.app/?utm_source=d...
▶ ToDo app source code
https://github.com/craftzdog/react-na...
https://github.com/craftzdog/react-na...
▶ Ingredients
* React Native - ReactJS-based framework that can use native platform capabilities
* Expo - Toolset for building and delivering RN apps
* React Navigation(v6) - Routing and navigation
* NativeBase(v3) - Themable component library
* React Native Reanimated - Animations
* React Native SVG - Drawing SVG
* Moti - Helper module for Reanimated 2
▶ My dotfiles
https://github.com/craftzdog/dotfiles...
▶ My terminal set up
   • My Fish shell workflow for coding
▶ My NeoVim set up
   • How to set up Neovim 0.5 (LSP, Treesi...
▶ My desk setup
*    • A solo app developer's dream desk set...
▶ My equipments
* Video editing: Final Cut Pro X
* Camera: Fujifilm X-T4
* Mic: Zoom H1n
* Slider: SliderONE v2
* Terminal: Hacked Hyper - https://dev.to/craftzdog/getting-side...
* Keyboard: Keychron K2V2 -    • Lubing my Keychron K2V2 to get a bett...

Follow me online here:
▶ Twitter   / inkdrop_app
▶ Blog https://blog.inkdrop.app/
▶ Instagram   / craftzdog
▶ Subscribe to my Newsletter https://www.devas.life/

Credits:
▶ BGM: Epidemic Sound https://www.epidemicsound.com/referra...

0:00 Digest
01:25 Create a new Expo project
06:05 Prepare to use NativeBase
08:42 Add dark theme support
13:33 Go to Kyoto!
14:49 Create SVG checkmark
18:21 Animate the checkbox
22:00 Fix a babel error
23:02 Make the checkbox able to toggle
25:19 Animate the checkbox
27:58 Create task item component
33:55 Animate task label
47:45 Integrate react-navigation and drawer
51:25 Implement swipe-to-remove interaction
01:07:09 Make task items editable
01:12:25 Create task list component
01:31:42 Animate background color
01:36:20 Add masthead
01:43:06 Fix scrollview
01:45:29 Implement sidebar content
01:56:16 Add about screen
02:05:20 Testing on Android

#ReactNative #ASMR #CodeWithMe