How to build a Gmail-like UI with React Native [at a Zen temple Koshoji]

Рет қаралды 291,731

Күн бұрын

▶ 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

Пікірлер: 312

@devaslife 7 ай бұрын

Check out my Markdown note-taking app designed for developers 👉 www.inkdrop.app/?M9UFHLAl0

@tommyboii3066 2 жыл бұрын

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!

@bkr_vids 2 жыл бұрын

I agree, these videos are very nice!

@devaslife 2 жыл бұрын

Thank you so much for collaborating with me, Koshoji🙏🙏 www.uji-koushouji.jp/eng/

@WEOOLTECNOLOGY 2 жыл бұрын

hi i'm from india i'm working on react native one day i want meet you

@WEOOLTECNOLOGY 2 жыл бұрын

you are living my dreams in real life

@krutinjayeshkumarrathod9147 2 жыл бұрын

@Igor Cantelmo lol

@stoicfloor 2 жыл бұрын

This is absolutely incredible. The filming, your sense of beauty, the app's aesthetics. Beautiful.

@micamicamarumiru9677 2 жыл бұрын

Love your style of coding combined with filmmaking. Life is joy when connect nature and what you love.

@WiseManCOD 2 жыл бұрын

This was actually super cool, really awesome to see someone so skilled as well as seeing the beautiful scenery.

@SNIPERZ1111 2 жыл бұрын

Your video's are so aesthetically, creatively and beautifully put together Takuya! Keep up the amazing work.

@japanlocal6841 2 жыл бұрын

Hey Takuya, thanks for the soothing ASMR keyboard and awesome editing. It makes your videos so pleasant to watch. The content is pure genius !!

@Tri-Technology 2 жыл бұрын

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!

@veronicageek 2 жыл бұрын

I don't even code in React. I just watch for the typing sounds, the beautiful scenery, and the peace & quiet when coding 😌

@resurrexi 2 жыл бұрын

Not only are your videos educational, they are also relaxing and soothing to my ears! Thanks for sharing.

@oldo-nicho 2 жыл бұрын

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 🙂

@captainlennyjapan27 2 жыл бұрын

Absolutely amazing video! I’ve been thinking about doing something like this but your video aesthetics is a whole next level. めっちゃ好きです。

@nikkehtine 2 жыл бұрын

Undoubtedly one of my favorite channels on KZfaq and my favorite technology related channel

@user-hy4sz8lx5z 2 жыл бұрын

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

@ramasubramanyam.s.6927 2 жыл бұрын

Your videos are always refreshing to watch!

@samuelzierlinger 2 жыл бұрын

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.

@itskrox-johnochuro 2 жыл бұрын

Ah man! you're the baddest to ever do it. I really love your work! Let's get in!

@ninostephen 2 жыл бұрын

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!

@mwanikimwaniki6801 2 жыл бұрын

Relatable

@joemac84 2 жыл бұрын

Even aside from the coding, the scenery & filmmaking is a delight, thank you!

@TheSalaho1 2 жыл бұрын

I will comeback to watch the whole thing, just 5 minutes in and I'm astonished by the quality of cinematic an sound design.

@juleswinnfield1437 2 жыл бұрын

Your videos are beautiful pieces of art, and I hope whole-heartedly you're proud of them! They're amazing :)

@SownJevan 2 жыл бұрын

The video quality! My God. This is such a good video. As always, appreciate the mind-blowing video.

@CaptTragedy 2 жыл бұрын

As if I already didn't want to go to Japan, your videos make it that much more enticing as a new programmer!

@Way_Of_The_Light 2 жыл бұрын

I think this is one of your best videos yet 🙏

@malvaloca 2 жыл бұрын

Your videos always are good news. Thanks Takuya!

@gavriel6089 2 жыл бұрын

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!

@ryanbeatbox 2 жыл бұрын

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!

@imerla1316 2 жыл бұрын

this keyboard techniques is just incredible!

@samdroid37 Жыл бұрын

your style is so clean and relaxing. I try to be like this.

@Fizzify 2 жыл бұрын

Wow, these videos are getting crazy!

@jfriis 2 жыл бұрын

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

@umanajohan 2 жыл бұрын

It's so satisfying to watch your videos

@rog0079 2 жыл бұрын

Craving more react-native builds after watching this mind blowing build :D!!!!

@marcogirolamo6911 2 жыл бұрын

it is a great pleasure to see your videos!

@robimuhammad95 Жыл бұрын

Love this video style, man! Deserves more sub!

@gatca5744 2 жыл бұрын

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.

@addisbyte2279 2 жыл бұрын

You are the sensei I have been looking for!!!!

@user-xr6oz7to2e 2 жыл бұрын

かっこよすぎます。これからも頑張ってください！

@khalidrafi1111 2 жыл бұрын

Damn! The setup looks soo clean.

@sunraiii Жыл бұрын

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 :)

@cecece775 2 жыл бұрын

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. ❤

@teknologene 2 жыл бұрын

I never get to finish your videos in one go. This is ASMR to me. >_

@doraemon3376 2 жыл бұрын

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

@johnbox5540 2 жыл бұрын

this video is such a gift. amazing!

@mohammadmahdifarnia5358 2 жыл бұрын

Really satisfying, even when watching configurations. thanks 🙏

@daunampc 2 жыл бұрын

I come from Vietnam , Love your style of coding combined with filmmaking

@sabinhogui 2 жыл бұрын

Amazing video, as always!

@universecode1101 2 жыл бұрын

as Js - React developer I know React Native even if I use it less. Nice project 👏🏻

@FirstYokai 2 жыл бұрын

Such a beautiful channel idea

@pruthvil 2 жыл бұрын

i like watching these long format videos much better than movies and shows

@leandropms97 2 жыл бұрын

Your videos inspired me! thanks and congrats! Hugs from Brazil

@chadj1797 2 жыл бұрын

Absolutely amazing video!

@j946atFIVEFOUR88AA 2 жыл бұрын

Love the aesthetic of the video!

@akaRong 2 жыл бұрын

why you so genius, so good programming. hopefully I can be like you in one day. keep hoping for the best of me.

@deadnihilist9957 2 жыл бұрын

I have visited the Japanese Garden in temple in Kyoto many years ago. I cant imagine programming in a temple. It is so amazing.

@bishenpatel1676 2 жыл бұрын

Woohoo Takuya you're back.. Time to clear my schedule for the next 2 hours 30 mins to watch your video

@nomad7317 2 жыл бұрын

Wow!! If all coding tutorials were shot like this!!

@bloglifenguyen3028 2 жыл бұрын

Your video is on a different level

@TheMorra93 2 жыл бұрын

Top notch video as always.

@CarlosMartinez-nc7on 2 жыл бұрын

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. 😃🔥

@luke.f.evarretta9851 2 жыл бұрын

The edits are crazy!! Excellent work man!!

@devaslife 2 жыл бұрын

🤩

@oseebotendju9120 2 жыл бұрын

Thank you so much for this tutorial, it's just amazing 🤩

@bswill5077 2 жыл бұрын

Jeez what an awesome view. Im not sure if i will be able to concentrate with that wonderful view :D

@lastink444 2 жыл бұрын

It's absolutely amazing! Thank you very very much!!!🙏🙏🙏

@pokr2934 2 жыл бұрын

Thanks for the great video! BTW Uji is such a beautiful town. I wish I could visit there again.

@henrik3141 Жыл бұрын

What a great unique style coding video

@mohamadka986 2 жыл бұрын

Love you and your videos my friend

@aronkoffler 2 жыл бұрын

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.

@GratuityMedia 2 жыл бұрын

thanks for another amazing video!

@nguyentuenhan179 2 жыл бұрын

Nice vids, btw love the nature

@thecodingkid9755 Жыл бұрын

this dude is underrated people need to watch his videos

@vasiliisisilii 2 жыл бұрын

Большое вам спасибо за вдохновение. Благодаря вам я решился стать программистом ❤

@akashdeepsharma9339 2 жыл бұрын

Really loving your coding video its an inspration

@jesusantoniorozozapata8981 2 жыл бұрын

your work inspiration me, thanks man, Greetings from colombia.

@senshai1267 2 жыл бұрын

I like the usage of real environmental sounds.

@diy-speaker Жыл бұрын

Wow. Like. Everything.

@Lara-yc6mh 2 жыл бұрын

what a great video, amazing!

@user-rc4en1oe7u Жыл бұрын

У тебя очень классный стиль подачи, очень интересно наблюдать за тем как ты работаешь )))

@gbeck1065 2 жыл бұрын

I just fell in love with this chanel. Domo arigato Onegaishimasu. 共ありがとお願いします.

@felipeortizlucas2247 2 жыл бұрын

Tus videos son geniales, saludos desde Colombia 🇨🇴

@Mettaworldj 2 жыл бұрын

This is next level content.

@annusingh4694 2 жыл бұрын

Here we go! 💯

@oreset3343 Жыл бұрын

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!

@marvinzuniga6706 2 жыл бұрын

You are Amazing bro!!!

@IlllIlIlllIIIllIl 2 жыл бұрын

You are an inspiration for me

@starriet 2 жыл бұрын

what a wonderful peace...

@htooaunglin93 2 жыл бұрын

I am from Myanmar🇲🇲.I really like your video and I hope one day I will be a professional developer like you.🤩🥳

@user-yn6ii7ys3u Жыл бұрын

Most aesthetic coding content

@HarhaMedia Жыл бұрын

That's a very beautiful place to be.

@Max-my6rk 2 жыл бұрын

The video is so beautiful.

@couragic 2 жыл бұрын

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.