React Native Web setup for android/iOS and web with live reload on both!

3 min readJan 16, 2017

React native web project lets you run react native code on web and has been around for some time but there are no good tutorials to help developers set it up neatly. This writeup will help you set up a react native and a react web project such that you can develop for both on a single file along with live reload on both.

Sample Code:
https://github.com/naqvitalha/rn-rnw-setup-live-reload
You can check out react-native-web project here: https://github.com/necolas/react-native-web

Let’s start

1. Create the directory and init the project

mkdir rn-rnw-setup-live-reload
cd rn-rnw-setup-live-reload
npm init rn-rnw-setup-live-reload

2. Install webpack, webpack-dev-server, react, react native web and babel etc

npm install --save-dev webpack webpack-dev-server react react-dom react-native-web babel babel-core babel-loader babel-preset-env babel-preset-react babel-preset-stage-0npm install --save react react-dom react-native-web

You can also use babel-cli if you want instead of localbabel package.

3. Create webpack.config.js in root of the project and paste the following

module.exports = {
    entry: "./entry.js",
    output: {
        path: __dirname,
        filename: "bundle.js"
    },
    module: {
        loaders: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
                query: {
                    presets: ['env', 'stage-0', 'react']
                }
            }
        ]
    },
    resolve: {
        alias: {
            "react-native": "react-native-web"
        },
        extensions: [ '.web.js', '.js' ]    
     }
};

This config marks entry.js as the entry file i.e, this where the execution will start from. It also specifies react-native as an alias for react-native-web. The purpose of this is to be able to import from react-native in web code and avoid breaking things. Babel is also being used to allow us to use ES6 in our project, this is also necessary because react native sample code is written in ES6. Babel will transpile it to ES5 for us. For web specific code we’re specifying preference for .web.js files.

4. Create entry.js and index.html in project root

entry.js (don’t mind the path right now, it’ll all make sense)

document.write(require("./AwesomeProject/index.js"));

index.html

<html><head>
    <meta charset="utf-8">
</head><body id="react-root">
<script type="text/javascript" src="bundle.js" charset="utf-8"></script>
</body></html>

5. Init react native project (I’m assuming you have react-native installed)

react-native init AwesomeProject

6. Open index.js inside AwesomeProject directory and add this to the end of the file:

if (window.document) {
    AppRegistry.runApplication("AwesomeProject", {
        initialProps: {},
        rootTag: document.getElementById("react-root")
    });
}

The whole file should look like:

import { AppRegistry } from "react-native";
import App from "./App";AppRegistry.registerComponent("AwesomeProject", () => App);//This is what you pasted
if (window.document) {
    AppRegistry.runApplication("AwesomeProject", {
        initialProps: {},
        rootTag: document.getElementById("react-root")
    });
}

7. Run an android emulator, goto the ./AwesomeProject and run. You may run iOS one if you prefer or both :)

react-native run-android

React application will launch in the emulator within a few seconds

8. Goto project root the run

webpack-dev-server --watch -port 8082

Open http://localhost:8082/ in the browser to see the web page

You should have a setup like this now:

That’s it! Now when you make changes in index.js things will reload in both web and android/iOS app.

Note: You should definitely layout the project in a better way. This is just to get you started and let you know this is possible :)

React Native Web setup for android/iOS and web with live reload on both!

Written by Talha Naqvi