Mastering React Native for Web: The Ultimate Guide

Introduction

The choice of your development stack is one of the most crucial decisions you will need to make when beginning a new project. You must choose a platform where the majority of your users are engaged, but the platform shouldn’t be overly constrictive.

Your program may need to reach people on a completely another platform if it grows in the future. Your initial stack should be adaptable enough to meet these expansion requirements as a result.

React Native for Web, which is another flexible technology, allows programmers to use React Native Components and APIs on the Web. Given that React Native is one of the most widely used frameworks for creating cross-platform mobile applications, this changes the game in the competition between mobile-first frameworks.

We’ll discuss the buzz surrounding React Native for Website Development in this article and set up a demo project using it as well.

Can React Native be used for web and mobile?

Yes! To run React Native on the web, developers may create a single React Native application that runs natively on Android, iOS, and a web browser utilizing common web technologies by using React Native for the Web.

But it’s worth wondering why such technology is required in the first place given that React, the conceptual forerunner of React Native, is created primarily for the web.

The reality is that a mobile app’s base is very different from a web app’s foundation. For instance, although React Native makes use of specialized UI APIs like View and Text, React leverages fundamental HTML5 components like div and span to build its layout. Due to this distinction, relatively few technologies enable the development of mobile and web apps.

An attempt to close this gap is React Native for Website. It is designed to make it easier to develop true cross-platform apps using a single React Native codebase. But how does it accomplish that? Let’s investigate.

What is React Native and where to use it?

An open-source JavaScript framework called React Native allows developers to create apps for different operating systems, including iOS, Android, and the web, all from a single source of code. It is based on React and brings all of its splendor to the creation of mobile apps.

Facebook gave existence to both the ReactJS (web) and React Native frameworks. The goal of the Hackathon project React Native was to eliminate the largest pain point for the company—maintaining two code bases for their app. What is the drawback of managing two code bases for such a large app? Duplication of effort and, occasionally, approaching the same issue from two separate angles. A simple solution to these issues is React Native.

While leveraging native-OS views, React Native compiles the app’s user interface in JavaScript. It permits code implementation in OS-native languages (Swift and Objective-C for iOS, Java, and Kotlin for Android) for more complicated functionality.

Wide-ranging use cases are well suited for React Native, especially those that call for innovation and the creation of feature-rich, cross-platform mobile applications. The following are some excellent examples of the finest use cases for React Native:

Social networking and media apps

React Native is a great option for developing social media platforms, networking apps, and community-driven platforms since it offers a user experience that closely resembles that of native software. Real-time interactions, dynamic content updates, and seamless connection with several APIs and third-party services are frequently necessary for these kinds of apps.

Developers can create compelling, responsive, and interactive social experiences across several platforms thanks to React Native’s flexibility and performance.

Facebook, Instagram, Skype, and Discord are the top examples in this case.

Marketplaces and On-Demand Services

For creating markets and apps for on-demand services, React Native is a popular option. React Native’s cross-platform capabilities enable businesses to quickly design and deploy apps for both iOS and Android platforms, whether it be for ride-hailing, food delivery, or freelance platforms.

This adaptability enables businesses to enter the market quickly, engage a larger audience, and offer a consistent user experience across many devices.

React Native is used, for instance, by Delivery.com and Uber Eats.

Retail and E-commerce Apps

Smooth transaction processes and enjoyable user experiences are essential to the success of the e-commerce sector. React Native is a great option for developing e-commerce and retail apps since it can produce high-performance, aesthetically pleasing interfaces, and seamless navigation.

Because it is cross-platform, businesses may create a streamlined shopping experience for their clients that includes elements like product catalogs, user reviews, safe payment channels, and tailored recommendations.

For instance, Walmart and Flipkart

Apps for travel and hospitality

For travel and hospitality companies looking to give their clients a smooth mobile experience across a variety of devices, React Native is a handy tool. React Native can help create feature-rich travel and hospitality apps that operate smoothly across various platforms, from reserving lodging and flights to researching local attractions and guides.

React Native may boost user engagement and the overall user experience by integrating with location-based services, push alerts, and interactive maps.

Want an illustration? Airbnb

Applications for IoT and Smart Homes

React Native is a useful technology for creating mobile apps that control and monitor Internet of Things (IoT) devices and smart home systems as the IoT continues to change the future.

The ability of React Native to interface with embedded systems and work with a variety of IoT protocols provides seamless integration between mobile apps and smart devices. This gives users the ability to conveniently control their linked homes or IoT-enabled gadgets from their smartphones.

For instance, Yeti Smart Home

What are the limitations of react native for web development

Of course, React Native has some drawbacks, just like any other technology:

Still slightly less performant than native programs. 

React Native is unable to utilize all of a given platform’s advantages and capabilities.

However, the re-architecture makes a significant attempt to make RN more performant; for instance, Hermes, a new JS engine, is now available and significantly speeds up app performance on older Android devices.

Ineffective for complicated interfaces 

Consider choosing native development if intricate designs or sophisticated interactions are a key component of your competitive advantage. Simply said, despite the fact that React Native is renowned for its effective UI rendering, it occasionally falls short of completely native applications in terms of performance, particularly when performing intricate animations or demanding computational activities.

Updating problems 

Updating the app to the newest React Native version could be challenging. Most of the time, updating React Native versions is a challenging procedure.

Identifying and fixing problems 

Comparing React Native development to fully native development, it can be more difficult. It is more difficult to diagnose and fix problems when JavaScript and native code are combined since it adds layers and possible weak points. To overcome these difficulties, thorough testing and knowledge of React Native-specific debugging tools are necessary.

Getting Started with React Native for Web

Let’s walk through the installation procedure to learn how to set up our web-friendly React Native application now that we have a theoretical understanding of the ideas behind this addition to the React Native family of APIs.

Expo and Create React App are the two methods we can use to set up a React Native for website applications.

1. Expo

Expo is a framework for creating all types of React applications. Expo for Web, it facilitates the creation of applications for Android, iOS, and the Web.

Expo for web offers a universal SDK for running native mobile Expo apps on the web using React Native for Web, as well as a suite of cross-platform APIs that are included out of the box, including web build optimizations.

The steps listed below can be used to bootstrap a React Native for Web application using Expo for Web:

// initialize project with npm

npx expo-cli init your-app-name

cd my-app

// install react-dom and react-native-web

npm install react-dom react-native-web

npx expo-cli start

2. Create React App

The preferred method for launching web-only React applications is with Create React App. Expo is still advised even though it has built-in support for aliasing react-native-web to react-native.

However, by following the methods listed below, we may bootstrap a React Native for Web application using CRA:

// initialize create-react-app project

npx create-react-app your-app-name

cd my-app

// install react-dom and react-native-web

npm install react-native-web

npm start

Prepare your React Native application for the web

Let’s begin by launching your Expo project from scratch with the following:

// initilaize project

npx create-react-app <-- app-name -->

Be aware that we use the most recent CRA package by utilising npx. When we install it worldwide, this eliminates the burden of managing its version locally:

// change directory

cd <-- app-name -->

// install dependencies

npm i react-native-web

In order to register our App root component using React native’s [AppRegistry.registerComponent] (https://reactnative.dev/docs/appregistry), we must first install the major packages. If you are using expo-cli, this step is not necessary.

To register the App root component, change the code in the index.js file to the following: AppRegistry is the JavaScript entry point for launching all React Native apps.

import { AppRegistry } from "react-native";

import App from "./App";

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

AppRegistry.runApplication("App", {

  rootTag: document.getElementById("root")

});

Let’s add some boilerplate code that makes use of the React Native CLI after that. Replace the following code in the App component:

import React from 'react';

import { Button, StyleSheet, Text, View, Dimensions } from 'react-native';

function Link(props) {

  return <Text {...props} accessibilityRole="link" style={StyleSheet.compose(styles.link, props.style)} />;

}

function App() {

  return (

    <View style={styles.container}>

      <View style={styles.header}>

        <Text style={styles.title}>Welcome to React Native for Web</Text>

      </View>

      <Text style={styles.text}>

        This starter project enables you to build web application using React Native module. .

      </Text>

      <Text style={styles.text}>

        Built with <Link href="https://github.com/facebook/create-react-app">Create React App</Link> and{' '}

        <Link href="https://github.com/necolas/react-native-web">React Native for Web</Link>

      </Text>

      <Button onPress={() => {}} title="Example button" />

    </View>

  );

}

let ScreenHeight = Dimensions.get('window').height;

const styles = StyleSheet.create({

  container: {

    flex: 1,

    height: ScreenHeight,

    justifyContent: 'center',

    alignItems: 'center',

    backgroundColor: '#F5FCFF'

  },

  header: {

    padding: 20

  },

  title: {

    fontWeight: 'bold',

    fontSize: '1.5rem',

    marginVertical: '1em',

    textAlign: 'center'

  },

  text: {

    lineHeight: '1.5em',

    fontSize: '1.125rem',

    marginVertical: '1em',

    textAlign: 'center'

  },

  link: {

    color: '#1B95E0'

  },

  code: {

    fontFamily: 'monospace, monospace'

  }

});
export default App;

We can check the app now by launching:

npm start

And this is what we ought to see.

Customization and enhancements with Webpack and Babel

Under the hood, CRA performs a lot of work for us, including package aliasing and optimized Webpack configuration.

React Native for Web to React Native aliasing is supported out of the box by CRA utilizing Webpack’s resolve. alias function. As a result, React Native for Web is resolved when we import React Native into our application.

However, for knowledgeable developers with special requirements (such as utilizing Babel for transpilation or build enhancement), you should bootstrap your application using Expo. CRA also offers an internally optimized webpack configuration. As seen in the example below, take important to include your unique web pack configurations in the file webpack.config.js:

const webpack = require('webpack');

module.exports = {

  entry: {

    main: './index.web.js',

  },

  module: {

    loaders: [

      {

        test: /\.js?$/,

        exclude: /node_modules/,

        loader: 'babel',

        query: {

          presets: ['es2015', 'react'],

        },

      },

    ],

  },

  resolve: {

    alias: {

      'react-native$': 'react-native-web',

    },

  },

};

The ES2015 and JSX code in the aforementioned code is transformed into browser-friendly JavaScript by Webpack using the babel-loader. Using resolve. alias from Webpack, we manually configured package aliasing. Simply said, the $ signifies a direct match.

Keep in mind that we must manually install the necessary dependencies in order to use the configuration shown above, as shown below:

npm i webpack babel-loader babel-preset-react babel-preset-es2015

npm i webpack-dev-server --save-dev

By utilising the babel-plugin-module-resolver, Babel also enables module aliasing:

{

  "plugins": [

    ["module-resolver", {

      "alias": {

        "^react-native$": "react-native-web"

      }

    }]

  ]

}

Further recommendations

When running React Native on the web, even though CRA offers some out-of-the-box features, it is typically advised that you program.

It is advised that you utilize the babel-plugin-react-native-web plugin for build-time optimisations. Installing it as a dev dependency looks like this:

npm install --save-dev babel-plugin-react-native-web

Additionally, the platform module allows for the addition of platform-specific code:

import { Platform } from 'react-native';

const styles = StyleSheet.create({

  height: (Platform.OS === 'web') ? 200 : 100,

});

Conclusion

In this tutorial, we covered React Native for Web’s definition, the problem it addresses, and the mechanism of operation. Before starting to build our own React Native for Web application from scratch, we first learned how to set up a React Native for Web project.

We also learned how to use customized Webpack configurations and how to use Babel to provide improvements.

It’s interesting to note that Twitter, Uber, and Major League Soccer all use React Native for online in their live online apps. I hope you have enough knowledge now to apply it to your upcoming multi-platform project.

FAQ’S