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

▶ Check out my product: Inkdrop - Markdown note-taking app
▶ Source code
▶ Koshoji website
▶ My dotfiles
▶ My equipment
* Video editing: Final Cut Pro X
* Keyboard: Keychron Q1 with Gateron Zealios V2 67g

Follow me online here:

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

#ReactNative #CodeWithMe #ASMR

[tommyboii]

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!

[stoicfloor]

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

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

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

[micamicamarumiru]

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

[itskrox-johnochuro]

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

[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 🙂

[juleswinnfield]

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

[gatca]

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.

[japanlocal]

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

[nikkehtine]

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

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

[TheSalaho]

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

[HualanN]

I like how Takuya type all config manually for making the video enjoyable, i love his sacrifice 😍. You made my day and other peoples too💪✔️.

[veronicageek]

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

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

[hyszlxz]

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

[oreset]

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!

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

[bishenpatel]

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

Lots of love & respect to you from a Malaysian fan, Takuya..