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

▶ 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

[@devaslife]

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

[@tommyboii3066]

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]

I agree, these videos are very nice!

[@stoicfloor]

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

[@veronicageek]

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

[@micamicamarumiru9677]

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

[@SNIPERZ1111]

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

[@devaslife]

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

[@WEOOLTECNOLOGY]

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

[@WEOOLTECNOLOGY]

you are living my dreams in real life

[@krutinjayeshkumarrathod9147]

@Igor Cantelmo lol

[@oldo-nicho]

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 🙂

[@japanlocal6841]

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

[@captainlennyjapan27]

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

[@ninostephen]

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]

Relatable

[@WiseManCOD]

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

[@juleswinnfield1437]

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

[@Tri-Technology]

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!

[@resurrexi]

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

[@samuelzierlinger]

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.

[@user-hy4sz8lx5z]

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

[@gatca5744]

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.

[@TheSalaho1]

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

[@joemac84]

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

[@ryanbeatbox]

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!

[@nikkehtine]

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

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

[@CaptTragedy]

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

[@ramasubramanyam.s.6927]

Your videos are always refreshing to watch!

[@jfriis]

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

[@universecode1101]

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

[@cecece775]

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

[@SownJevan]

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

[@itskrox-johnochuro]

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

[@gavriel6089]

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!

[@samdroid37]

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

[@deadnihilist9957]

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

[@imerla1316]

this keyboard techniques is just incredible!

[@doraemon3376]

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

[@rog0079]

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

[@user-xr6oz7to2e]

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

[@bishenpatel1676]

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

[@CarlosMartinez-nc7on]

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

[@malvaloca]

Your videos always are good news. Thanks Takuya!

[@daunampc]

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

[@umanajohan]

It's so satisfying to watch your videos

[@robimuhammad95]

Love this video style, man! Deserves more sub!

[@pruthvil]

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

[@rithulkamesh]

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!

[@Way_Of_The_Light]

I think this is one of your best videos yet 🙏

[@mohammadmahdifarnia5358]

Really satisfying, even when watching configurations. thanks 🙏

[@Fizzify]

Wow, these videos are getting crazy!

[@pokr2934]

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

[@leandropms97]

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

[@teknologene]

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

[@akaRong]

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

[@aronkoffler]

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.

[@nomad7317]

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

[@johnbox5540]

this video is such a gift. amazing!

[@khalidrafi1111]

Damn! The setup looks soo clean.

[@marcogirolamo6911]

it is a great pleasure to see your videos!

[@couragic]

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.

[@oseebotendju9120]

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

[@addisbyte2279]

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

[@user-rc4en1oe7u]

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

[@bswill5077]

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

[@lastink444]

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

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

[@sabinhogui]

Amazing video, as always!

[@chadj1797]

Absolutely amazing video!

[@luke.f.evarretta9851]

The edits are crazy!! Excellent work man!!

[@devaslife]

🤩

[@senshai1267]

I like the usage of real environmental sounds.

[@theropoy9371]

Such a beautiful channel idea

[@gbeck1065]

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

[@vasiliisisilii]

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

[@TheMorra93]

Top notch video as always.

[@bloglifenguyen3028]

Your video is on a different level

[@j946atFIVEFOUR88AA]

Love the aesthetic of the video!

[@jesusantoniorozozapata8981]

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

[@WikiPeoples]

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.

[@shibakaneki555]

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

[@shibakaneki555]

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!

[@felipeortizlucas2247]

Tus videos son geniales, saludos desde Colombia 🇨🇴

[@GratuityMedia]

thanks for another amazing video!

[@henrik3141]

What a great unique style coding video

[@mohamadka986]

Love you and your videos my friend

[@thecodingkid9755]

this dude is underrated people need to watch his videos

[@jordansalazar1482]

Such an awesome and inspirational video. By the way, what are the name of the little stands you use for your macbook?

[@Joshua-dt8tw]

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 !

[@goldenmunky6512]

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!

[@nguyentuenhan179]

Nice vids, btw love the nature

[@karthikeyanparasuraman9337]

Such satisfying video!! May I know what is the stand clip you use on the bottom of your macbook laptop..

[@akashdeepsharma9339]

Really loving your coding video its an inspration

[@jiafu4428]

Hi Takuya, I'm new to this, did you just re-created the markdown app using react native ? I really like the minimal UI and so if I could do that I really wanna try.

[@htooaunglin93]

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

[@LachesisBlue]

The quality of your content is fantastic! How do you like your NuPhy keyboard as compared to your Keychron board?

[@Lara-yc6mh]

what a great video, amazing!

[@matthewng2633]

Love your videos Takuya! May I ask how you show the keystrokes on your screen as you type?

[@edwinrojas2108]

Me encanta este contenido, realmente siento un nivel de detalle muy bueno y el video a grandes razgos da mucha paz. Quisiera llegar a ser así algún día

[@HarhaMedia]

That's a very beautiful place to be.

[@thefireagen]

hey takuya love your videos man.. how do you animate/edit those chat type text in starting of the videos? thanks

[@thuanhoangnhat2350]

Hey guys, i love this video. Hope you have more video React Native

[@cdey3886]

So relaxing! What software do you use to screen record? And do you use chroma key for the translucent background on the code editor?

[@prajumsook]

Sir, Thank you for video, you inspire me.

[@Mettaworldj]

This is next level content.