We’ve heard from users that want to share code between web, iOS, and Android that it is challenging to set up react-native-web in both new and existing projects; it requires familiarity with tools like Webpack, Metro, and Babel just to get started. We’ve tried to make this easy with expo-cli:

To add web support to an Expo project, or a react-native init project,

Ensure you’re using the latest version of babel-preset-expo

Install react-native-web, and react-dom.

Add the property “web” to the expo.platforms array in your app.json

Then run expo start with the latest version of the expo-cli after the bundler has started, you can press the w key to open your app in the browser.

We’ve also assembled a guide for usage with create-react-app!

Behind the scenes we handle the Webpack and Babel configuration for you. We’ve configured Webpack so that your new project will get a PWA score of 100 in Chrome’s Lighthouse Audit right out of the box. Workbox by Google, for example, is installed by default. Your PWA manifest and other configuration is automatically generated from your app.json, so properties like icons, title, orientation, and theme color don’t need to be maintained in a separate file if you don’t want to.

Expo SDK is now “tri-platform”

Once your project is set up, you will ask yourself “what’s next?” Well, you probably want to write code. Actually, why write code when you can install some from npm, drop it in your app, and take the rest of the day off? Sadly you may find that this won’t work quite as well as you would expect with RNW because most libraries in the React Native community do not support web.

Gaming in the browser with Expo and Three.js

What does it mean to support web? It means that either all of the code in the package depends only on the primitives that RNW makes available, or wherever that’s not possible within the package it provides an alternative implementation with the .web.js extension. Over the past few months we have updated most of the Expo SDK to work the same on web where possible, and fall back to something reasonable where not. For example, expo-linear-gradient uses the linear-gradient CSS function on web since it’s available there, but expo-calendar doesn’t do anything because there is no equivalent web API. This won’t quite solve all your problems but we hope it helps. We also have started to work on a document that can help guide developers to build React Native libraries that work on iOS, Android, and web. See the list of currently supported SDK modules here, and head over to native.directory to filter by web to see what else is available.

It’s also worth noting that now that you can use Expo APIs in any React Native app, you can also use them in any RNW app, so if you’re using create-react-app or another tool with RNW rather than Expo CLI, you can still install expo-linear-gradient, for example, and use it in your project. Here is an example.

Deployment

We’ve put together comprehensive guides for uploading your project to a variety of services; GitHub Pages, AWS, Netlify, Surge, and Now have guides here: Deploying Expo Web Apps (and feel free to add more!). The default Webpack config for managed Expo projects will produce gzipped and Brotli compressed artifacts, so feel free to just run that build command and get deploying.

What’s next

While in beta you can’t use web and native at the same time since the preview version is slightly ahead of the natively deployed build, this is just due to the fact that we’re between release cycles. We also want to make webpack very customizable without needing to “eject” or start from scratch. Finally the CLI also has lots of exciting potential that we want to explore!

In the next few months we’ll also be talking more in-depth about features and plans at App.js Conf and React Europe.

Over the coming weeks we’ll also be releasing best practices for creating modules that work on web and native.

Try it out

Read over the example docs to give this all a try. The main reason I’m announcing this is to summarize all of the web PRs we’ve been landing, keep you updated with the progress, and to get your feedback. I’ve found that just having the ability to run an Expo project on the web quickly reveals what needs to be done to make the tools better (usually via error messages 😅). Let us know what you think in the comments or on Twitter.

Thanks for Reading

https://github.com/expo/web-examples