Building for Mobile and Web with Expo, part 1: App Chrome
In this series we rewrite a link-saving app in Expo, a framework built on top of React Native. This allows us to run the same codebase on Android, iOS, and the web. You can find the repo here: https://github.com/CodingItWrong/fire...
In this session we made it as far as setting up:
The Expo project itself
Linting and autoformatting
The navigation library, React Navigation - https://reactnavigation.org
The UI library, React Native Paper - https://reactnativepaper.com
The "chrome" of the app, including getting most of the way through setting up the navigation drawer and dark mode support
We ran into a bug getting React Navigation working on web that kept us stuck for a while. Turns out it's a known issue with react-native-reanimated (https://github.com/software-mansion/r...) reported just this past week. But I don't mind that it happened: I said I wanted to demonstrate both the pros and cons of this architecture, and an error in a transitive dependency is one of the risks of a React Native project. I hope it's encouraging to y'all that even streamers run into tricky errors, and I hope the troubleshooting techniques were helpful to you!
Chapters:
00:00:00 - Introduction to the Stream
00:06:08 - Introduction to Firehose app
00:07:45 - Initializing the Expo project
00:19:17 - Setting up React Navigation
00:42:53 - Troubleshooting a React Navigation error on web
01:06:16 - Setting up React Native Paper
01:12:40 - Styling the navigation drawer with RN Paper
01:22:55 - Styling the header with RN Paper
01:44:42 - Customizing the theme primary color
01:49:07 - Add dark mode support
02:03:46 - Wrap-up