How to build a Gmail-like UI with React Native [at a Zen temple Koshoji]
Vložit
- čas přidán 1. 07. 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 - Věda a technologie
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!
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.
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
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 !!
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 🙂
This was actually super cool, really awesome to see someone so skilled as well as seeing the beautiful scenery.
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.
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!
Absolutely amazing video! I’ve been thinking about doing something like this but your video aesthetics is a whole next level. めっちゃ好きです。
Not only are your videos educational, they are also relaxing and soothing to my ears! Thanks for sharing.
I don't even code in React. I just watch for the typing sounds, the beautiful scenery, and the peace & quiet when coding 😌
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
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!
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
Undoubtedly one of my favorite channels on CZcams and my favorite technology related channel
Your videos are always refreshing to watch!
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 :)
Ah man! you're the baddest to ever do it. I really love your work! Let's get in!
As if I already didn't want to go to Japan, your videos make it that much more enticing as a new programmer!
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!!
The video quality! My God. This is such a good video. As always, appreciate the mind-blowing video.
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!
your style is so clean and relaxing. I try to be like this.
this keyboard techniques is just incredible!
Craving more react-native builds after watching this mind blowing build :D!!!!
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 :)
Your videos always are good news. Thanks Takuya!
Wow, these videos are getting crazy!
I think this is one of your best videos yet 🙏
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.
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 have visited the Japanese Garden in temple in Kyoto many years ago. I cant imagine programming in a temple. It is so amazing.
かっこよすぎます。これからも頑張ってください！
It's so satisfying to watch your videos
i like watching these long format videos much better than movies and shows
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
it is a great pleasure to see your videos!
I come from Vietnam , Love your style of coding combined with filmmaking
Love this video style, man! Deserves more sub!
You are the sensei I have been looking for!!!!
Really satisfying, even when watching configurations. thanks 🙏
I never get to finish your videos in one go. This is ASMR to me. >_
Wow!! If all coding tutorials were shot like this!!
Damn! The setup looks soo clean.
Amazing video, as always!
Woohoo Takuya you're back.. Time to clear my schedule for the next 2 hours 30 mins to watch your video
Your videos inspired me! thanks and congrats! Hugs from Brazil
The edits are crazy!! Excellent work man!!
🤩
У тебя очень классный стиль подачи, очень интересно наблюдать за тем как ты работаешь )))
this video is such a gift. amazing!
as Js - React developer I know React Native even if I use it less. Nice project 👏🏻
Love the aesthetic of the video!
Such a beautiful channel idea
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. 😃🔥
Absolutely amazing video!
Top notch video as always.
Thanks for the great video!
BTW Uji is such a beautiful town. I wish I could visit there again.
why you so genius, so good programming. hopefully I can be like you in one day. keep hoping for the best of me.
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.
I like the usage of real environmental sounds.
Your video is on a different level
Thank you so much for this tutorial, it's just amazing 🤩
It's absolutely amazing! Thank you very very much!!!🙏🙏🙏
Jeez what an awesome view. Im not sure if i will be able to concentrate with that wonderful view :D
Sugoi! I love how you can hear the frogs and the birds, its very relaxing while watching someone write good code (even more relaxing)! Keep this up mate! Also is this UI coming to the official inkdrop app? coz I would definitely use it!
Большое вам спасибо за вдохновение. Благодаря вам я решился стать программистом ❤
I just fell in love with this chanel. Domo arigato Onegaishimasu. 共 ありがと お願いします.
this dude is underrated people need to watch his videos
your work inspiration me, thanks man, Greetings from colombia.
What a great unique style coding video
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.
thanks for another amazing video!
Love you and your videos my friend
what a great video, amazing!
Here we go! 💯
Such an awesome and inspirational video. By the way, what are the name of the little stands you use for your macbook?
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!
Really loving your coding video its an inspration
Nice vids, btw love the nature
Tus videos son geniales, saludos desde Colombia 🇨🇴
This is next level content.
I love this style :3
This video and all that lovely typing is so very therapeutic. Thank you for this video. By the way, how is your pro display XDR? I'm looking to get it as well and was wondering if you ever regret getting it? Thanks!
Loved this video and like others have said, really enjoyed the whole getting to the temple part. It really set the mood. One question if I may - during the project setup phase, it seems like you have all of this stuff memorized? I don't see any kind of second window or documentation up so very surprising to see you configuring all of the libs and plugins from memory.
Wow. Like. Everything.
That's a very beautiful place to be.
Such satisfying video!!
May I know what is the stand clip you use on the bottom of your macbook laptop..
You are Amazing bro!!!
You are an inspiration for me
Pure joy ❤
« zen coding » :) I think you are getting more and more your video style here. This mix of travelling and coding has its own personnality, I am wondering if such kind of video attracts more viewer than the other ones… That’s very nice indeed!
I understand now why I like your videos. They express the kind of « distraction free » environment that I am looking for when coding. The keyboard noise keeps me focused on coding, that’s brillant, in fact!
Again, an amazing video ! Peaceful and beautiful :) I was wondering, you never have to look on google or any other seach ingine for answers? feels like u know the entire react native by head :D As a fellow programmer, i feel like i have a long way to go ! Thanks again for your work !
The quality of your content is fantastic! How do you like your NuPhy keyboard as compared to your Keychron board?
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.🤩🥳