Building for Web & Mobile with Expo

certificate
Recording and certification are available to Multipass and Full ticket holders only
Please login if you have one.
Rate this content
Bookmark

We know that React is for the web and React Native is for Android and iOS. But have you heard of react-native-web—for writing an app for Android, iOS, and the web in one codebase? Just like React Native abstracts away the details of iOS and Android, React Native Web extracts away the details of the browser as well. This opens up the possibility of even more code sharing across platforms.

In this workshop you’ll walk through setting up the skeleton for a React Native Web app that works great and looks awesome. You can use the resulting codebase as a foundation to build whatever app you like on top of it, using the React paradigms and many JavaScript libraries you’re used to. You might be surprised how many types of app don’t really require a separate mobile and web codebase!

You will know:

- Setting up drawer and stack navigators with React Navigation, including responsiveness

- Configuring React Navigation with URLs

- Setting up React Native Paper including styling the React Navigation drawer and headers

- Setting up a custom color theme that supports dark mode

- Configuring favicons/app icons and metadata

- What to do when you can’t or don’t want to provide the same functionality on web and mobile


Prerequisites: 

- Familiarity with building applications with either React or React Native. You do not need to know both.

- Machine setup: Node LTS, Yarn, be able to successfully create and run a new Expo app following the instructions on https://docs.expo.dev/get-started/create-a-new-app/

This workshop has been presented at React Advanced Conference 2022, check out the latest edition of this React Conference.

FAQ

React Native Web is a technology that allows developers to use React Native codebase and target the Web as a runtime environment. It enables the same React Native components and code to be executed on web platforms, effectively allowing for a unified codebase that can target both native mobile platforms and web browsers.

Expo provides a framework built on top of React Native that simplifies the development process by managing the underlying infrastructure and allowing developers to focus on writing JavaScript code. It supports React Native Web by default, helping developers to deploy the same application across iOS, Android, and web platforms using a single codebase.

React Navigation provides a seamless way to handle navigation in a React Native application, which can also be applied to React Native Web. It supports deep linking and helps in managing navigation stacks, including handling transitions, backstack, and passing parameters between screens, making it easier to manage complex navigation needs in a unified application.

Yes, React Native Web supports TypeScript, which allows developers to benefit from type-checking and other features of TypeScript to write more robust and maintainable code. Many parts of the React Native ecosystem, including Expo, have adopted TypeScript, providing good support for it in their libraries and tools.

Deploying a React Native Web application involves compiling the application into web-compatible assets using tools like Webpack. Expo provides commands such as 'expo export web' which prepares the build directory with all static files needed for deployment. The output can then be deployed to any web hosting service like Netlify, Vercel, or AWS.

EAS Build is a service provided by Expo that allows developers to build and compile their applications in the cloud. While primarily used for building native iOS and Android apps from a React Native codebase, EAS Build can also be configured to handle builds for React Native Web, facilitating continuous integration and deployment across all platforms.

When considering React Native Web, important factors include the need for a unified codebase across web and mobile, the similarity in functionality and UI between web and mobile versions, and the level of control required over the web platform's HTML and CSS. Projects that benefit most from React Native Web typically require consistent functionality and branding across platforms without needing highly customized web-specific features.

Josh Justice
Josh Justice
161 min
27 Oct, 2022

Comments

Sign in or register to post your comment.

Video Summary and Transcription

React Native Web allows for building mobile and web apps with one codebase. The workshop covers setting up navigation, creating screens, and implementing stack and drawer navigators. It also explores platform-specific functionality, responsive design, and deployment options. React Native Web abstracts away complexity and enables developers to do more with less. The workshop provides resources and encourages participation in live streams and community forums for further learning and support.
Video transcription and chapters available for users with access.