React Native for Web

Published On: 15 December 2020.By hitesh singhal.

General
Mobile

React Native for Web

It is always better to reuse the existing code. We always strive through the point that we need to have different developers for running our code in different platforms. For ex. A web developer is required to develop web applications and a Mobile developer for Mobile Apps Like Android and IOS.

React Native solves our problem of having different developers for ios and android by providing the feature of development cross platform application that supported Android and ios.

Now there is still a need for Web Application Developers for developing web apps. react-native-web is the new library comes in to solve this problem. This library enables us to share the same code of React native to use for the web.

In this Article we can see how to use this library to achieve our goal of sharing our same React Native code to run on the web.

There are two scenarios for how we can develop React Native Apps.

Expo
React Native CLI

Note: React-native-web library is supported by expo and it runs under an expo environment.

Expo:

From Expo SDK Version 33, react-native-web is prebuilt in expo.
Current Version of expo pre built with react-native-web library.

How to create App in Expo:

To setup new project in expo, Use the following command in terminal

 $ expo init <project name=""> </project>

1	$ expo init <project name=""> </project>

It will ask some details for configuration for the project.
- Project Template -> Select Blank
Enter inside project folder
Run the Project with the following command:

$ expo start

1	$ expo start

Metro Bundler will start at http://localhost:19002
On the left side you can see Run in the Web Browser.
To Run the Project in Android, Click on the respective Link on the Left Side of Metro Builder.

Existing React Native CLI

We can also modify our existing CLI project to support react-native-web Library.

There are few settings that need to be done in order to support the existing CLI project to create an expo environment and run it for the web.

Installing various Libraries

Installing Various Libraries
$ npm install expo $ npm install react-dom $ npm install react-native-web

1
2
3

$ npm install expo
$ npm install react-dom
$ npm install react-native-web

Modify app.json

While working in react-native cli project, we may have some more attributes in app.json file.
Expo needs only one attribute to be there.
So we need to rename the existing file to app.native.json and modify the existing file with the following content.

// app.json
{ "name": "reactnativewebcli"}

1 2	// app.json { "name": "reactnativewebcli"}

Modify index.js

For react native we have the following snippet.

AppRegistry.registerComponent(appName, () => App);

1	AppRegistry.registerComponent(appName, () => App);

To support for web also we need to modify our existing file to match the following snippet

// Index.js
import { AppRegistry, Platform } from "react-native";
import App from "./App";
import { name as appName } from "./app.native.json";
import { registerRootComponent } from "expo";

if (Platform.OS == "web")
registerRootComponent(App);
else
AppRegistry.registerComponent(appName, () => App);

1

2

3

4

5

6

7

8

9

10

// Index.js

import { AppRegistry, Platform } from "react-native";

import App from "./App";

import { name as appName } from "./app.native.json";

import { registerRootComponent } from "expo";

if (Platform.OS == "web")

registerRootComponent(App);

else

AppRegistry.registerComponent(appName, () => App);

Here we have conditionally dividing the register App part for web and mobile.

Running for web

To run on web we need to run the same command in terminal which we have used for expo

$ expo start

1	$ expo start

One liner command to start expo server as well as to run the project into web browser

$ expo start --web

1	$ expo start --web

Web Build

This build is required to host the project into web hosting server (for ex: aws, google, or godaddy etc)
To create build we need to run the following command in terminal

$ expo build:web

1	$ expo build:web

This will create a folder in root directory with name web-build

Note: In the js folder inside web-build, there will be files with extensions .map on production. We need to delete those files, because it will display the source code in the developer tools section in the browser.

Few Tips and Tricks

1 Separate View from Business Logic

We should always separate the UI Code from business logic.
So that whenever required we can display different UI for web or mobile.
This can be achieve by creating two separate files for web and mobile For ex: index.js, index.native.js
System will auto detect the platform and use the respective file.

2 Separate Part of View by Condition