How to build a smoothly animated ToDo app with React Native, Expo, Reanimated, NativeBase, and Moti
Вставка
- Опубліковано 1 лип 2024
- 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
www.inkdrop.app/?...
▶ ToDo app source code
github.com/craftzdog/react-na...
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
github.com/craftzdog/dotfiles...
▶ My terminal set up
• My Fish shell workflow...
▶ My NeoVim set up
• How to set up Neovim 0...
▶ My desk setup
* • A solo app developer's...
▶ My equipments
* Video editing: Final Cut Pro X
* Camera: Fujifilm X-T4
* Mic: Zoom H1n
* Slider: SliderONE v2
* Terminal: Hacked Hyper - dev.to/craftzdog/getting-side...
* Keyboard: Keychron K2V2 - • Lubing my Keychron K2V...
Follow me online here:
▶ Twitter / inkdrop_app
▶ Blog blog.inkdrop.app/
▶ Instagram / craftzdog
▶ Subscribe to my Newsletter www.devas.life/
Credits:
▶ BGM: Epidemic Sound 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 - Наука та технологія
Check out my Markdown note-taking app designed for developers 👉 www.inkdrop.app/?LLBhY
This guy makes Hollywood level coding tutorials. Love it! ♥
Thanks, Hassaan🥰
A technical video was made into an art film
Totally agree with you
For free
i never thought, but yaa it's true.
Who needs Netflix having this sort of content? Keep it up.
This feels like coding asmr
Holly Shit Kenny is Here...
You've inspired me in so many ways. I am extremely thankful for this. I hope you continue to deliver these kinds of tutorials as they are greatly helping me and I hope many others to code better and more efficiently.
it's relaxing, fun and educational to watch you work. thank you!
Man you’re a legend. I really get excited when you post something, and I instantly know that it’s something cool even before knowing what is it
I have never seen such beautiful programming videos. I'm glad I found your channel 👾
This looks so cool, I love the way you disposes elements in your video, and since there are not music or people talking, this is really chill.
Thanks !
You are by far my favorite UA-camr. The content, quality and flow of your videos are just perfect! Much love
idk what to say i've never been this happy you always give me motivation just to code and be better and better thanks for your videos. i'll always watch them
The sheer quality of these videos, GREAT!
I appreciate when you go out and give us a look at the city, keep it going !
You are like a cinematographer who excels in coding .
I love your content ❤️
Just love the way you make these videos. They are informational and sooo beautifully edited. Love it! ♥
You really are an inspiration for me as a developer ❤️
This video is a piece of art. I really enjoyed it. In addition your coding skills and the use of Vim are amazing. Thanks for sharing
This is some ASMR level coding, watched it like 30mins didn't do anything coz this is so relaxing. Love the clicky-ti-clacks. Hands down the best coding tutorial I've ever seen.
That was so soothing to watch and the quality of the video was so insane.
I love the dedication you put in any part of your code and app, are those little details that make the difference. I can notice the passion and love you put in what you do, and the most satisfying thing is when you see the finished work. Keep like that, one day I hope to achieve what you do!
Finally finished!! It works! Thanks so much for the incredible tutorial, Takuya. I can't wait to start implementing smoother animations into my apps!
great!
can you tell me which applications i should download to follow along ? ty
The way this guy sits behind his terminal I don’t have words for it but it’s amazing and soothing. The best videos made in surprised you don’t have more subscribers. Arigato
It's pretty clear how much effort you put into your videos and I'm always excited about your content. It's so fun and chilling to watch your videos. I hope your channel grows real well and more people get to enjoy these masterpieces.
Thanks!
asd
this is the only code channel I really enjoy rewatching
I just have fall in love with this channel.
Wow this is quality content!!!
Just like a movie when I see the ingredients, thank for sharing the art of coding.
You don't say a word, but i learn more from you than from anyone else on youtube. I'm so glad I found your channel. Thank you very much for letting us see you work.
I could watch you coding every day. Your visuals and choise of music are awesome. Looking forward to more content from you!
Man, how do you not have more subscribers? Like wow. From the usefulness of the project, to the cinematography, this is just amazing! Really well done!
Your videos make me calm and peaceful to watch !
man, I love the vibe of your videos!
great work! 👌🏼
Takuya, you make our work like art....
Ok but this is actually the best coding channel on UA-cam. Love it! 😆
Really appreciate the work you put in on these videos
That smile at the end when it works :)
My friend and I just wanted to make a todo app to learn app development and here is this video right on time!
The sounds from the keyboard is so lovely. Awesome content too😍😍
I'm a 10 years old fullstack developer and i have never seen a coder like this. You are amazing man ....
Recently came across your channel and I love your style. Just beautiful!
Finally, I found a channel that makes me so satisfying to hear that clicking sound of a keyboard also programming ☕️
I just watched to the whole thing. You’re amazing man. Congrats
Love you react native builds man!
When you are good.... you are GOOD!
Thanks for sharing....
God bless you man !!! These videos are a gem for the community, never stop spreading your priceless knowledge
May you get everything you wish !!!
Thanks you Takuya, it's my favorite channel, your content is amazing !!!
A new video of yours is always welcome in my book. Thank you for the 2-hours-long tutorial :P
I used to subscribe at you at 3k subs and I plan to stumble to this video and I am shocked you already have 93k subs :oooo keep up the good work man!
And I am stuck linking my git with my github account! Thanks for the awesome video man. Keep up the awesome high quality content!
never felt this satisfied watching someone codes
this is really top notch content ! thank you for taking the time to create it!
Amazing visual and presentation. Good work!
quality always find his path! keep them coming.
Im a junior developer in react native, this content is amazing for me, thanks for this, congratulations, continue with this types of contents
This guy is the one who has no 'dislike's. Because this is original. No talk , so patient while downloading dependencies and sound of keyboard makes this video so charming.
You are a legend. Inspired a lot. Just keep such content up! Thank you!
Your design skills are amazing!
Aaahhhh ~ This mesmerizing meditative clicking sound of heaven with simple yet professional tutorial plus cozy workplace and beautiful video editing .. Arigatao ghosaimasu Takuya-san ~ XD
*Takuya-sama he is a Master ! 🤩👌👨🏻💻
Found out about you yesterday! Best channel ever 😍
I'm fan of your channel, can't wait for next video, hopefully full fledged react project.
dude htf do you remember all the config and libs that you need,
you must done this for like thousands of times
much respect!
Calming yet informational video... nice.
I love this guy. I always look forward to your videos. Amazing content. ❤️
Wow this is amazing!! You deserve so much more. Keep it up!!!
I honestly also come here because of the great quality of the videos you make
wow！！amazing style video i have not never see！
Im new on coding. Watching you makes me feel motivated 👍👍
This is not coding this is an art and you brother are an artist right there
i just found out your video and find it somewhat motivating. idk why, but thanks a lot for making videos!
I'm glad that the youtube algo brought me here, your videos are so inspirational. Happy coding :)
i enjoy your designs. Amazing job.
Yay another video from you! 🥰
initially i thought this video is perfect for binge watching, but it actually inspired me to do this kinda project ; )
😄
This is mind blowingly brilliant
Thank so much for the tutorial, it was fun to code to along.
Your vids are such an inspiration. Thank you. Cheers from Croatia ❤✌
You are the Best ! 🏆
It's a pleasure to follow and watch you🤝 !!!!! To know that through what you do, more motivated to continue to learn programming and everything related to IT (being more motivated) !!! Thank you!!!
🙏
awesome video. this is what got me started with typescript and react native. never used either before
Your terminal is so fascinating 😍
i just love your channel and hope you keep making such good videos, specially on react native, thank you so much!
I love Kyoto 13:34, 47:33
And I love your content. Blog posts, videos, all great! Do you have Spotify or share your music playlists anywhere?
This is amazing. I love this kind of content.
Thanks for uploading this video. I love your work.
Really like the coding, but the cinematography and editing is on point here 👌
コードを見るのと好きですけど、撮影や編集の能力は当然通り素晴らしい！😃✌️
this is amazing to watch like movie and very excellent tutorial to do , THANKS
Takuya... what an amazing content!! Huge fan!!! Congrats!
this is a freaking masterpiece!
This really is what I watch when I eat now. So smooth and nice!
A bit frustrating to see how smooth he is xD
Watching the master at work
Thanks, I have learned many things from your videos.
I love this content. Keep up man!
I'm hypnotized very nice video.
You really are an inspiration for me as a developer ️
This man is a magician. I quit all of my ios and android work and focused on react.
I LOVE THIS KIND OF VIDEOS !!!!
Please make a detailed tutorial on your workflow, this looks so good 😊
I am not a developer like you or most of your audience, but I really like your style and programming in general. Currently I am working at a company using a No / Low Code software for data integration interfaces, so it is a different kind of field, but the idea of creating my own To Do app...just for fun (!) motivates me! Would it be possible for you to create (if you haven't already) a tutorial for programming amateurs that has a fruitful product at the end (like a to do app)? Please concider it and keep up this amazing work! You really make me think twice about my current job haha. Thanks!
I wish all youtubers be like you that can see clearly what they did. 🥰
Wow dude, amazing app!!!
Thanks for existing
Absolutely beautiful Channel. I'm glad I found it. ❤️