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

Clint Goodman
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]

  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
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

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

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>

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 (
<Text>Hello world!</Text>
onPress={() =>'Button was clicked!')}
style={{flex: 1}}
This is a button

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.