How to build animated & responsive tablet UIs with React Native (at the lakeside)

▶ Source code https://github.com/craftzdog/inkdrop-...
▶ My dotfiles https://github.com/craftzdog/dotfiles...
▶ My equipment http://uses.craftz.dog/
▶ Check out my product: Inkdrop - Markdown note-taking app
https://www.inkdrop.app/?utm_source=d...

Follow me online here:
▶ Twitter   / inkdrop_app  
▶ Subscribe to my Newsletter https://www.devas.life/
▶ Blog https://blog.inkdrop.app/
▶ Instagram   / craftzdog  

Credits:
▶ Proofreading - Marco Cognetta   / good_in_theory  
▶ BGM - Epidemic Sound https://www.epidemicsound.com/referra...

00:00 Intro
02:34 Add note list header component
07:39 Create TextInput restyle component
14:24 Add a TextInput to the header bar
20:27 Move the theme picker to the sidebar
25:39 Add a left header bar button that can transform i
37:07 Add a clear button to the header bar
38:55 Implement the header bar animations
43:19 Enable tablet layouts
44:29 Add a navbar to the detail screen
53:37 Add editor state atom
56:48 Create a note list screen for phones
01:03:07 Use 'useSetAtom' for better performance
01:03:21 Make the screen responsive
01:11:08 Create a note list screen for tablets
01:13:47 Create a three-column lavout component
01:28:12 Memoize props of some components to improve
01:29:33 Hide left view in portrait mode
01:30:11 Toggle the sidebar
01:31:05 Add the sidebar to the left view
01:32:09 Implement detail screens for phones and tablets
01:40:02 Update the stack navigator for phones
01:40:19 Display note body on the detail screen
01:44:45 Ending

#ReactNative #CodeWithMe #ASMR