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

4 min readAug 17, 2020

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:

npx react-native init AwesomeProject

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

yarn start# new tab
npx react-native run-ios # or npx react-native run-android

Introduce react-native-web

[Code example]

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

import React from 'react';
import ReactDOM from 'react-dom';
import App from './src/app';ReactDOM.render(<App />, document.getElementById('root'));

3. Create a public/index.html file

<html>
    <body>
        <div class='container'>
            <div id="root"></div>
        </div>
    </body>
</html>

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

yarn add react-native-web react-dom
yarn -D add webpack webpack-cli webpack-dev-server style-loader css-loader html-webpack-plugin babel-loader

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

const HtmlWebPackPlugin = require('html-webpack-plugin');module.exports = {
  entry: './index.web.js',
  module: {
    rules: [{
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      }, {
        test: /\.(js|jsx)$/,
        exclude: /node_modules\/(?!(react-native))\//,
        use: { loader: 'babel-loader' },
      }],
  },
  plugins: [new HtmlWebPackPlugin({
      template: './public/index.html'
  })],
  resolve: {
    alias: { 'react-native$': 'react-native-web' },
  },
};

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.

// index.web.js
import './src/styles.css'// src/styles.css
html, body, .container, #root { height: 100% }.container {
    max-width: 800px;
    margin: auto;
}#root {
    display: flex;
}

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.

import React from 'react';
import {View, Text} from 'react-native';export default function App(){
    return (<View>
      <Text>Hello world!</Text>
    </View>);
};

Running the web app

[Code example]

Add the following script to your package.json:

{
    "scripts": {
        ...
        "web": "webpack-dev-server --mode development --open"
    }
}

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.

yarn add @ant-design/react-native
yarn add -D babel-plugin-import

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

{
   plugins: [['import', {libraryName: '@ant-design/react-native'}]],   
}

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

// src/App.js
import React from 'react';
import {View, Text} from 'react-native';
import {Button, Provider, Toast} from '@ant-design/react-native';export default function App() {
  return (
    <Provider>
      <View>
        <Text>Hello world!</Text>
        <Button
          onPress={() => Toast.info('Button was clicked!')}
          style={{flex: 1}}
          type="primary">
          This is a button
        </Button>
      </View>
    </Provider>
  );
}

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.

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

Setting up your react-native-web project

Begin a react-native project

Introduce react-native-web

Getting the styling right

Fixing src/App.js

Running the web app

Installing ant-design for react-native

Next up

Written by Clint Goodman