Log in
React Conferences
React Day Berlin 2022React Day Berlin 2022
EN

Building for Web & Mobile with Expo

Josh Justice
Josh Justice
React Trainer
certificate
Recording and certification are available to Multipass and Full ticket holders only
Please login if you have one.
Get Multipass
Rate this content
Bookmark
Slides

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!


What's included

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

2. Configuring React Navigation with URLs

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

4. Setting up a custom color theme that supports dark mode

5. Configuring favicons/app icons and metadata

6. 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 Day Berlin 2022, check out the latest edition of this React Conference.

FAQ

React Native Web is a way to use the React Native framework to write applications that run on the web as well as on iOS and Android. It allows developers to write one codebase for multiple platforms, simplifying development and maintenance processes.

React Native Web handles responsive design by allowing developers to use React Native's styling and layout system, which is based on Flexbox. This system can be used to create responsive layouts that work across different screen sizes and devices.

React Native Web primarily focuses on enabling React Native applications to run on the web. While it can use many of React Native's components and APIs, accessing native mobile features directly (such as camera, GPS) typically requires native code or using a library that supports these features in a web environment.

React Native Web is suitable for applications that benefit from sharing code between web and mobile platforms. However, for applications requiring intensive use of native features or those needing highly optimized performance for specific platforms, separate native development might be more appropriate.

The main benefits of using React Native Web include code reuse across iOS, Android, and web platforms, which can lead to reduced development time and costs. It also simplifies the project management process by allowing teams to focus on a single codebase.

To start a project with React Native Web, you can initialize a new React Native project using the React Native CLI or Expo, and then configure it to support web using React Native for Web libraries and dependencies. Documentation and community resources can guide through specific setup steps.

react nativecross-platformreactexpo
Josh Justice
Josh Justice
155 min
06 Dec, 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 code base. The workshop covers setting up an app skeleton, configuring navigation, implementing responsive design, and adding custom styling with React Native Paper. It also discusses platform-specific functionality and the trade-offs between React Native Web and separate apps. The workshop provides insights into internationalization, secure storage, and choosing the right tools for app development. Overall, React Native Web and its abstractions make development more efficient and enable building for multiple platforms.
Available in Español: Creación para Web y Móvil con Expo
Video transcription and chapters available for users with access.
Available in other languages: