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.

  1. Expo
  2. 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

 

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

    1. Installing various Libraries
    • Installing Various Libraries
    •  

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

     

    1. Modify index.js
    • For react native we have the following snippet.

     

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

     

    • Here we have conditionally dividing the register App part for web and mobile.
    1. Running for web
    • To run on web we need to run the same command in terminal which we have used for expo

     

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

     

    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

     

    • 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

    • Anywhere if we need to separate the logic for web or mobile, we can use Platform component.
    • For ex: Platform.os ==’web’ or Platform.os==’mobile’

    Sample Repo Links to quick start:

    https://hiteshsinghal@bitbucket.org/hiteshsinghal/reactnativewebexpo.git

    https://hiteshsinghal@bitbucket.org/hiteshsinghal/reactnativewebexpo.git

     

    Still Looking for:

    1. Conditionally separate Imports & Exports statements for web and mobile.

    Official react-native-web link: https://github.com/necolas/react-native-web

    Comments