How to build a Gmail-like UI with React Native [at a Zen temple Koshoji]
Вставка
- Опубліковано 3 лип 2024
- ▶ Check out my product: Inkdrop - Markdown note-taking app
• How to take notes in M...
▶ Source code
github.com/craftzdog/inkdrop-...
▶ Koshoji website
www.uji-koushouji.jp/eng/inde...
▶ My dotfiles
github.com/craftzdog/dotfiles...
▶ My equipment
* Video editing: Final Cut Pro X
* Camera: Fujifilm X-T4 - amzn.to/3MVuPBV
* Tripod: PeakDesign TT-CB-5-150-CF-1 - amzn.to/3NCqN2c
* Mic: Zoom H1n - amzn.to/38VAwkx
* Keyboard: NuPhy Air60 nuphy.com/collections/shop/pr...
* Keyboard: Keychron Q1 with Gateron Zealios V2 67g
* Browser: Min - minbrowser.org/
Follow me online here:
▶ Twitter / inkdrop_app
▶ Blog blog.inkdrop.app/
▶ Instagram / craftzdog
▶ Subscribe to my Newsletter www.devas.life/
00:00 Intro
01:20 Heading to Koshoji
06:56 Create a new react native project
07:15 Install dependencies
10:15 Configure the project
17:45 Integrate React Navigation
19:48 Add main screen and sidebar
25:34 Add types to navigator
26:51 Add basic atoms and light theme
34:19 Style the sidebar with the theme
35:57 Make fixtures
39:38 Container component
41:40 Note list
47:15 Header bar
53:24 Add vector icons
58:26 Touchable (Button)
01:07:55 Add press handler to sidebar
01:09:39 Prepare making header sticky
01:12:02 Sticky header
01:19:22 Implement snapping
01:21:14 Status bar
01:24:20 Swipeable View
01:33:34 Note list swipe action
01:42:06 Bottom sheet
01:54:28 Notebook list
02:01:37 Add Inkdrop logo
02:05:39 Add notebook list to the bottom sheet
02:07:17 Detail screen
02:10:29 Dark theme
02:14:47 Time-up! Let's go home
02:15:15 Fix a TS error in theme
02:15:36 Theme picker
02:26:51 More themes
02:29:24 Thanks for watching
▶ Ingredients
- TypeScript - www.typescriptlang.org/
- React Native - reactnative.dev/
- React Navigation(v6) - reactnavigation.org/
- Restyle - github.com/Shopify/restyle
- React Native Reanimated - docs.swmansion.com/react-nati...
- React Native SVG - github.com/react-native-svg/r...
- React Native Vector Icons - github.com/oblador/react-nati...
- React Native Bottom Sheet - github.com/gorhom/react-nativ...
- jotai - jotai.org/
#ReactNative #CodeWithMe #ASMR - Наука та технологія
Check out my Markdown note-taking app designed for developers 👉 www.inkdrop.app/?M9UFHLAl0
I really love these videos and I'm glad you included yourself walking to the temple it was very pretty. I can only imagine that the environment creates a great mindset for problem solving. Thanks for the video!
I agree, these videos are very nice!
Thank you so much for collaborating with me, Koshoji🙏🙏 www.uji-koushouji.jp/eng/
hi i'm from india i'm working on react native one day i want meet you
you are living my dreams in real life
@Igor Cantelmo lol
This is absolutely incredible. The filming, your sense of beauty, the app's aesthetics. Beautiful.
Love your style of coding combined with filmmaking. Life is joy when connect nature and what you love.
This was actually super cool, really awesome to see someone so skilled as well as seeing the beautiful scenery.
Your video's are so aesthetically, creatively and beautifully put together Takuya! Keep up the amazing work.
Hey Takuya, thanks for the soothing ASMR keyboard and awesome editing. It makes your videos so pleasant to watch. The content is pure genius !!
I love the style of your videos! It's so nice to see you in the background and the editor and emulator at the same time!
I don't even code in React. I just watch for the typing sounds, the beautiful scenery, and the peace & quiet when coding 😌
Not only are your videos educational, they are also relaxing and soothing to my ears! Thanks for sharing.
Thoroughly enjoyed that video! Currently on a trip in Brazil and picked up Covid so just isolating in a room for a few days and it was such a meditative pleasure to take 2 hours to watch you at work. Thank you and good luck with Inkdrop 🙂
Absolutely amazing video! I’ve been thinking about doing something like this but your video aesthetics is a whole next level. めっちゃ好きです。
Undoubtedly one of my favorite channels on UA-cam and my favorite technology related channel
You are an inspiration for many developers around the world, and the quality of your videos is amazing. I really like to watch your videos while I'm coding. Greetings from Punta Arenas, Chile, one of the closest cities to the Antarctic continent
Your videos are always refreshing to watch!
Man, love your videos. It’s like coding in the purest form, not only that, it’s art. Learned so much from coding with you. Thanks.
Ah man! you're the baddest to ever do it. I really love your work! Let's get in!
Not sure how you do it but you are yet again exactly on time when I need something to boost my morales to do my side project. The fact that you smade inkdrop on your own is my inspiration. Thank you!
Relatable
Even aside from the coding, the scenery & filmmaking is a delight, thank you!
I will comeback to watch the whole thing, just 5 minutes in and I'm astonished by the quality of cinematic an sound design.
Your videos are beautiful pieces of art, and I hope whole-heartedly you're proud of them! They're amazing :)
The video quality! My God. This is such a good video. As always, appreciate the mind-blowing video.
As if I already didn't want to go to Japan, your videos make it that much more enticing as a new programmer!
I think this is one of your best videos yet 🙏
Your videos always are good news. Thanks Takuya!
I have watched some of your videos in the past and I found them pretty interesting, but after watching this video I had to subscribe!
Amazing video, and the environmental aspects are great... I live out in the mountains here in CR and will code in my backyard now to enjoy the nature, listening to the river and the birds and breathing fresh air while I code out projects is simply amazing. You are an inspiration to me and I'm sure many others. Keep up the great videos!
this keyboard techniques is just incredible!
Wow, these videos are getting crazy!
your style is so clean and relaxing. I try to be like this.
I would lowkey just want "travelling in Japan" vlogs, your video style, the beauty of Japan. Just wow, you can talk or not, whatever is fine!!
It's so satisfying to watch your videos
Craving more react-native builds after watching this mind blowing build :D!!!!
it is a great pleasure to see your videos!
Love this video style, man! Deserves more sub!
You are the sensei I have been looking for!!!!
I live in Japan and usually develop using React Native.
This video reminded me that I have a great environment around me and that being a programmer is a wonderful thing.
Thanks, I respect him a lot.
かっこよすぎます。これからも頑張ってください！
Damn! The setup looks soo clean.
I'm currently about to finish my CS degree and have lost my motivation to really be interested in anything. Your videos have been a great inspiration for me to go into full stack development to make cool stuff people love to use, from wherever I want.
Thank you for making your content. You may have changed my future indefinitely for the better :)
Good video as always man, good work, thaught about Inkrop when i saw Tauri framework, it look like electron for but it's way more fastee using react for the front and rust for the backend, that's one of my issues with inkdrop, that's all, you such an inspiration for me while I was depressed. ❤
I never get to finish your videos in one go. This is ASMR to me. >_
His videos are the most aesthetic videos i've found on ytube
i like the way he creates his videos without saying anything
wish you all the best for your ytube journey
this video is such a gift. amazing!
Really satisfying, even when watching configurations. thanks 🙏
I come from Vietnam , Love your style of coding combined with filmmaking
Amazing video, as always!
as Js - React developer I know React Native even if I use it less. Nice project 👏🏻
Such a beautiful channel idea
i like watching these long format videos much better than movies and shows
Your videos inspired me! thanks and congrats! Hugs from Brazil
Absolutely amazing video!
Love the aesthetic of the video!
why you so genius, so good programming. hopefully I can be like you in one day. keep hoping for the best of me.
I have visited the Japanese Garden in temple in Kyoto many years ago. I cant imagine programming in a temple. It is so amazing.
Woohoo Takuya you're back.. Time to clear my schedule for the next 2 hours 30 mins to watch your video
Your video is on a different level
Wow!! If all coding tutorials were shot like this!!
Top notch video as always.
I just graduated with my Computer Science Degree. Kinda hard to get my first gig but watching your videos has rebuilt my developer fire within. I definitely hope to be like you later on in my career. Never stop uploading. 😃🔥
The edits are crazy!! Excellent work man!!
🤩
Thank you so much for this tutorial, it's just amazing 🤩
Jeez what an awesome view. Im not sure if i will be able to concentrate with that wonderful view :D
It's absolutely amazing! Thank you very very much!!!🙏🙏🙏
Thanks for the great video!
BTW Uji is such a beautiful town. I wish I could visit there again.
What a great unique style coding video
Love you and your videos my friend
Can't believe you're using a Nuphy keyboard, I just bought mine and it is just and incredible experience. Also, thank you for your great vids.
thanks for another amazing video!
Nice vids, btw love the nature
this dude is underrated people need to watch his videos
Really loving your coding video its an inspration
Большое вам спасибо за вдохновение. Благодаря вам я решился стать программистом ❤
your work inspiration me, thanks man, Greetings from colombia.
I like the usage of real environmental sounds.
Wow. Like. Everything.
what a great video, amazing!
У тебя очень классный стиль подачи, очень интересно наблюдать за тем как ты работаешь )))
I just fell in love with this chanel. Domo arigato Onegaishimasu. 共 ありがと お願いします.
Tus videos son geniales, saludos desde Colombia 🇨🇴
This is next level content.
Here we go! 💯
I used Google to translate. Hello, my name is André, I'm Brazilian, inspired by your work, I've always been passionate about the art of programming, especially the Web, my biggest dream is to be able to graduate in Anise and systems development, but my financial conditions don't cooperate, thank you so much success I admire your a lot job!
You are Amazing bro!!!
You are an inspiration for me
what a wonderful peace...
I am from Myanmar🇲🇲.I really like your video and I hope one day I will be a professional developer like you.🤩🥳
Most aesthetic coding content
That's a very beautiful place to be.
The video is so beautiful.
Great and so inspiring videos! Thanks! P.S. It would be useful if you make comments on every option you’re typing with explanation what the option is used for.
Damn dude, living the dream
this is mind blowing
Pure joy ❤
Love the video bro nice videos keep it up
I love this style :3
Sending Love to Japan!
Sir, Thank you for video, you inspire me.
This is art.