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

Clint Goodman
Aug 17 · 4 min read

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

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

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store