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

▶ Check out my product: Inkdrop - Markdown note-taking app
https://www.youtube.com/watch?v=-qBavwqc_mY
▶ Source code
https://github.com/craftzdog/inkdrop-ui-mockup-react-native
▶ Koshoji website
https://www.uji-koushouji.jp/eng/index.html
▶ My dotfiles
https://github.com/craftzdog/dotfiles-public
▶ 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/products/air60
* Keyboard: Keychron Q1 with Gateron Zealios V2 67g
* Browser: Min - https://minbrowser.org/

Follow me online here:
▶ Twitter https://twitter.com/inkdrop_app
▶ Blog https://blog.inkdrop.app/
▶ Instagram https://instagram.com/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-native-reanimated/
- React Native SVG - https://github.com/react-native-svg/react-native-svg
- React Native Vector Icons - https://github.com/oblador/react-native-vector-icons
- React Native Bottom Sheet - https://github.com/gorhom/react-native-bottom-sheet
- jotai - https://jotai.org/

#ReactNative #CodeWithMe #ASMR

#Productivity #Solo dev #Programming #Indie dev #Japan #Temple #Zen #禅