How to make your react-native project work for the web

Part 1 of 2

React-native is awesome. It offers the following premise:

Create platform-specific versions of components so a single codebase can share code across platforms.

We all know that react-native can enable both Android and iOS development in the same codebase.

But then enters: react-native-web. I was very intrigued by the concept of publishing web content in addition to mobile platforms — all within a single codebase of JavaScript. So, I wanted to give react-native-web a try.

I built a very basic app. Along the way, I learned some tips, which I will explain in this article. I thought it would be very buggy on the web. But, to my surprise, there wasn’t a single obstacle that I wasn’t able to overcome, at least in my simple app.

In this article, I’ll explain how I set up my react-native-web project and installed a design system on it. In my next article, I will explain 3 tips I learned for making web compatible apps. Along the way you’ll see how to implement ant-design, firebase, react-router, and more.

Setting up your react-native-web project

First, let’s set up a react-native-web project.

You start off by setting up a standard react-native project. You then modify that project to have a web specific entry point and HTML page.

Begin a react-native project

You first start off by making a simple react-native project.

I followed the React Native CLI Quickstart steps, which looked something like this:

At this point I would try running the basic iOS and Android apps, just to ensure that they work properly.

Introduce react-native-web

[Code example]

  1. Move App.js to src/App.js (and change references to it in index.js)
  2. Create an index.web.js file at the root of your project

3. Create a public/index.html file

4. Add react-dom, react-native-web and webpack

5. Build a webpack.config.jsfile, which has the following:

If you want to take a look at the example repository, please do.

Here is some other documentation that I took inspiration from:

Getting the styling right

[Code example]

Here are some styles that will make your web app look like your native apps.

A note about styling:

For me, the trickiest part of the whole app was getting styles to look the same on each platform. I kept trying to use “regular CSS” stuff, like vh, margin: auto, etc.

In order to succeed, I had to drop all of that (outside of the css file above). Make it first look good on Android/iOS, then worry about the web. If you do the web first then go back to the native apps, you will be frustrated.

Fixing src/App.js

[Code example]

Unfortunately, the demo code they include in the react-native starter kit doesn’t work well on web, so for now to get up and going, I would use the following basic src/App.js.

Running the web app

[Code example]

Add the following script to your package.json:

And from your terminal, run yarn run web. That easy! You should now see a running web application.

Installing ant-design for react-native

[Code example]

Your web app looks pretty bare bones right now. Let’s add ant-design to spruce things up a bit.

Add this line to your babel.config.js file:

Now, add an ant-design button to your app:

Next up

Learn 3 tips for making your native app compatible for the web. While you’re at it, you’ll see how to install firebase and react-router. Click here to read part 2.