Web support for create-react-native-app

React Native so far did not really fulfil its promise of write once, render everywhere. Yes, it works that way for iOS and Android, and there are initiatives for Web, Windows, and MacOS, but there is no integrated approach yet. But the future is brightening, alpha support for webpages just landed. I wrote a demo app to test out how this works.

NOTE: The patch I contributed to implement Web support was pulled for various reasons, but I think it might have motivated Expo to prioritize web support, and they released it in full beta in SDK 33! So consider this article outdated. I’ll keep it up for posterity though.

Implementation

RN comes with Metro, a Javascript bundler with more or less Webpack-like features. It was written by facebook, and is optimized for large RN apps. Metro is not targeted towards the web, and documentation is sparse. So the alpha support in create-react-native-app uses webpack.

The way web support works is by adding some babel-plugins, that replace all instances of import ... from 'react-native' with import ... from 'react-native-web' and do the same for 'expo' .

Note that this is alpha support, both react-native-web as well as expo-web are incomplete. Various components are not implemented (SectionList for example), and behaviour might be different. Images need their width/height specified for the web to be rendered.

Still, I implemented a demo app. Source code is here. It’s for a slightly older version of the web support, but it’s very close.

Demo App

The demo app shows an example of how a React Native app can be integrated with a website with 100% code sharing.

Making the browser window smaller results in showing the mobile app:

This is just a proof of concept, but note that the menubar is actually a TabNavigator! See the source code for details.

Clone this repository and run yarn.

Run yarn start and connect your browser to http://localhost:8080. In another terminal you can run exp start and exp ios if you want. The exact same source code run on the iOS emulator and looks like this:

Neat right? The settings screen is a SectionList, so isn’t supported on the web yet.

Try the alpha yourself

It’s available now. Use the --with-web-support flag, and specify this alpha version of react-native-scripts :

npm install -g create-react-native-app
create-react-native-app myapp --with-web-support \
     --scripts-version 1.2.0-alpha.4
...
cd myapp
yarn web

This will show the following screen:

Yay! The same screen as in the apps, though shaking your phone won’t help you here..

Huge thanks to Nicolas Gallagher for doing the heavy lifting in react-native-web!

Let’s hope this will move forward fast and other platforms will be added soon.