Expo is on a mission to create the best possible end-to-end developer experiences for building and deploying apps on multiple platforms. Today we are very excited to announce experimental* web support for the Expo CLI and SDK!

Browser, Desktop PWA, Mobile PWA, Native Mobile Apps.

The two most notable projects that have brought React Native to the web are react-native-web (RNW) and react-native-dom (RND). RNW is the most pragmatic of the two — it provides implementations of React Native primitives like View, Text, and Image that render to the web equivalents like div, span, and img and otherwise is generally just like a normal webpage that uses the underlying platform. The StyleSheet API is pretty great too — it's “one of the fastest, safest, and most efficient styles-in-JavaScript solutions”. RND does some awesome and experimental stuff like skipping the browser layout engine and running Yoga, the same library that React Native uses on mobile. It's worth checking out but it's not meant for building production apps today. necolas/react-native-webReact Native for Web. Contribute to necolas/react-native-web development by creating an account on GitHub.github.com

Nicolas Gallagher built RNW while also using it to create the Twitter Lite PWA. Major League Soccer, Flipkart, Uber, The Times, and DataCamp have all since built mobile web and desktop apps around RNW. We also consulted our friends at Facebook to get a second opinion on web support. When it came to building web support into Expo tools, we naturally gravitated towards RNW.

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,

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.

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.

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.

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.

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.