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

Опубликовано: 27 Июнь 2026
на канале: devaslife

319,906

7.2k

▶ Check out my product: Inkdrop - Markdown note-taking app
   • How to take notes in Markdown efficiently ...
▶ Source code
https://github.com/craftzdog/inkdrop-...
▶ Koshoji website
https://www.uji-koushouji.jp/eng/inde...
▶ My dotfiles
https://github.com/craftzdog/dotfiles...
▶ My equipment
Video editing: Final Cut Pro X
Camera: Fujifilm X-T4 - https://amzn.to/3MVuPBV
Tripod: PeakDesign TT-CB-5-150-CF-1 - https://amzn.to/3NCqN2c
Mic: Zoom H1n - https://amzn.to/38VAwkx
Keyboard: NuPhy Air60 https://nuphy.com/collections/shop/pr...
Keyboard: Keychron Q1 with Gateron Zealios V2 67g
Browser: Min - https://minbrowser.org/

Follow me online here:
▶ Twitter   / inkdrop_app
▶ Blog https://blog.inkdrop.app/
▶ Instagram   / craftzdog
▶ Subscribe to my Newsletter https://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 - https://www.typescriptlang.org/
React Native - https://reactnative.dev/
React Navigation(v6) - https://reactnavigation.org/
Restyle - https://github.com/Shopify/restyle
React Native Reanimated - https://docs.swmansion.com/react-nati...
React Native SVG - https://github.com/react-native-svg/r...
React Native Vector Icons - https://github.com/oblador/react-nati...
React Native Bottom Sheet - https://github.com/gorhom/react-nativ...
jotai - https://jotai.org/

#ReactNative #CodeWithMe #ASMR