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