What is React Native for Web?

React Native Web is an awesome web development library available for frontend developers. The beauty of React Native Web is that it can be used to run an application on any platform just using a single codebase. React Native for web makes it possible to run React Native components and APIs on the web with the help of React DOM. In other words, React Native Web makes it easy to bring your React Native app to the web.

Who maintains React Native Web?

React Native was originally developed by Facebook in 2015, and React Native Web was created that same year by Nicolas Gallagher as an open source GitHub repository. React Native supports the web from version 0.60 upwards.

You may already know that, with React Native, developers are able to build cross-platform mobile apps which support both Android and iOS. But what about the web?

That is exactly the issue React Native for Web was created to address. Using React Native Web, developers can consolidate a React Native app into a single codebase without having to develop and maintain two codebases for both mobile and web, and without a loss in app performance. Their apps will render correctly on the web and perform just as well as they do on mobile devices.

Why should you use React Native for Web?

As mentioned above, the core advantage of React Native Web is that you can write the code once and share it across multiple platforms.

Another important advantage of this library is its native-quality interactions. Regardless of whether you are using it on your personal computer or in the browser of your mobile device, you get support for multiple input modes such as touch, mouse, or keyboard. For example, if you create a <Button/> with an onLongPress property, it will be handled correctly across all platforms.

The other bright side of this library is its support for accessibility. React Native Web includes APIs that enable developers to build more accessible apps. The highly supported accessibility components of the React Native Web are accessible, accessibilityLabel, importantForAccessibility, accessibilityRole, and accessibilityLiveRegion. You should consider using these features in order to ensure that every user has equal access to your app.

There are also other interesting features such as RTL (Right-to-Left) support, which automatically flips your app layout to support right-to-left languages. This is critical for developers who are planning to expand into new markets.

It’s also noteworthy that React Native Web supports server-side rendering, and you can integrate it with some popular tools like Gatsby or Next. You can find examples of those tools in the React Native Web repository on GitHub.

To sum it up, the advantages of React Native Web are:

  • Single codebase to share across multiple platforms and devices
  • Native-quality interactions
  • Support for accessibility
  • RTL support
  • Server side rendering support
  • Integration with static pages

What companies use React Native Web?

Even though React Native for Web is a relatively recent library and some features are still missing, it is used to power massive websites and web apps such as Twitter, Major League Soccer, Expo, Flipkart, Uber, DataCamp, and The Times.

How does React Native Web work?

React Native Web enables you to develop multi-platform applications by providing browser-compatible implementations of React Native's core components.

For instance, the View component used in React Native has a DOM-based version that is aware of how to render a div. React Native Web utilizes this (and other) translations to properly render mobile components in the browser. Even though every React Native component is not supported, enough of them are that you can translate most of your React Native codebase into a fully functional web app.

In addition to core components, styles for React and React Native are written differently. With React, many developers use plain CSS or a CSS preprocessor like Sass. But in React Native, all styles are written with JavaScript, as there is no DOM or selectors. React Native Web corrects this by rendering styles with Javascript instead of using CSS. This gives developers the benefit of writing a single set of styles which applies to both native mobile and web.

try our app estimate calculator CTA image

Implementing react-native-web

Below is the step-by-step process for converting React Native apps into web apps using React Native Web.

Requirements

  • NodeJS version 8.x.x or above and npm/yarn
  • Basic understanding of React Native, ReactJS and ES6 JavaScript features will be useful

Getting Started: Creating a React Native App

To begin, you should go to the terminal and install the necessary command line tools. The first one will help you scaffold a React Native app, while the other one will run it.

npm install -g create-react-app expo

After installing the above tools, run the below command from the terminal in order to create a new React project.

create-react-app reactnativeweb-demo

This will create a new directory. An important feature of this project creation tool is that it comes with integrated support for aliasing react-native-web to react-native.

Next, you will have to install a couple of more dependencies to make this project work as required. For that, run the below command after traversing inside the newly created project folder.

yarn add --dev babel-plugin-module-resolver

The babel plugin (babel-plugin-module-resolver) will be helpful in resolving the project modules when compiling with Babel. The Babel compiler is used by React Native internally.

Now you have to install the key dependencies without which the project cannot be run.

yarn add react-native expo react-native-web

The final step is to create a file named .babelrc at the root of the project directory with the below code snippet:

{
    "plugins": [
		[
			"module-resolver",
			{
				"alias": {
					"^react-native$": "react-native-web"
				}
			}
		]
	]
}

Running on the Web

Before proceeding to build a demo app, we have to check if the current configuration works properly. For that, open your src/App.js file and replace the content there with the following code snippet.

import React from "react"
import { StyleSheet, Text, View } from "react-native"

class App extends React.Component {
	render() {
		return (
			<View>
				<Text style={styles.text}>Hello, world!</Text>
			</View>
		)
	}
}

const styles = StyleSheet.create({
	text: {
		fontWeight: "bold",
		fontSize: 30
	}
})

export default App

Here, we’re primarily using the UI components built using the react-native API for the web application. In React Native terms, View is equal to div in HTML and text is equal to p or a span. There’s a strong resemblance between the APIs of the mobile and the web UIs, but there are also some major differences to grasp and understand.

In order to run the application, go to the terminal window, type npm start, and execute it. By hitting the URL http://localhost:3000 in your browser window, you can see the result as a text output of the wording "Hello, world!"

When to choose React Native Web over React

You may be wondering, "React has been there for many years, so what's the point of using React Native Web?" You may be also thinking both React Native Web and React are the same thing.

React for web was introduced before React Native and long before React Native for Web.

If you already have an app written in React Native that needs a web version, it will be easier to create that web app using React Native for Web, as it helps to run the same code on to the web with minimal changes. But if you choose React in such a scenario, you will have to start almost from scratch.

Also, React Native Web is the ideal choice from the outset if you are planning to build both web and mobile apps together, as it offers maximum code sharing across multiple platforms. With React, on the other hand, you will have to maintain the view files separately.

If you are going to build only a website with no mobile version, React will be the smarter choice.

Bug fixes, issues, and planned features for React Native Web in 2021

Although React Native is one of the hottest frameworks right now, it's not without its limitations. The same is true for React Native Web. React Native Web’s chief axes for improvement are its lack of maturity and some missing features. It still has a long way to go in order to overcome various performance issues, limitations, and challenges.

One such issue is that if your project contains some libraries that rely on native dependencies, they won’t work on the web. And even if you only use libraries which are free of native dependencies, you can’t expect them to work 100% of the time.

Also, not all of the React Native APIs are available in the browser (although some are still in the process of being translated).

The following are some of the key bug fixes planned for the React Native Web library in the coming months.

  • Nested FlatList errors.
  • Send onRequestClose to the correct modal even with animations.
  • TextInput selectTextOnFocus prop (Safari).

Below are some new features that are still under development for React Native Web.

  • Provide better API for opening in new tab
  • Implementing BackHandler for web
  • Enabling window/body based scrolling for all ScrollViews
  • Support image source objects
  • Implementing refocusing trigger-element after closing modal
  • Linking API: Support for New Tab
  • Implementing refocusing trigger-element after closing modal
  • Adding support for TV Devices
  • Adding support for opening a link in a new tab.

Building Universal Apps with React Native

Creating universal apps is a dream that came true for many developers, and React Native Web is close to making that dream a reality.

The critical factor that makes React Native a perfect fit for creating universal apps  is that it is a pure UI language. It specifies some base components which define UI primitives, and they are considered to be independent of the platform which runs them. All of the components we can create in React Native are based on primitives like <View>, <Text>, or <Image>, which are basic elements that make sense to any visual interface, no matter where it is run.

When it comes to styling, styling react-native-web components is exactly the same as styling react-native components. In the event that you want to have specific styling for the web, you can always write the conditional styling using the Platform.OS === ‘web’ check.

Building with React Native Web using Crowdbotics

The Crowdbotics App Builder is designed to facilitate the rapid development of universal software applications. It allows developers to scaffold and deploy working apps quickly by identifying the best packages for a given feature set.

Our App Builder runs on RAD stack, which consists of React Native and Django. This enables you to set up and configure React Native Web in a React Native mobile app generated on the Crowdbotics platform. To make things even easier, we're planning to release in-app support for React Native Web during Q4 2020, which will create universal, cross-platform apps from a single codebase by default.

Wrapping up

Web and mobile development are growing and changing at a rapid pace. While it’s true that a mobile app can give you more control and better performance, it is often advisable to also release a web application for true cross-platform user engagement.

React Native Web offers you the ability to create a highly scalable web application without having to maintain separate code bases for mobile and web. Even though this library is not yet an official part of the React Native project, its increasing popularity could revolutionize how we think about universal app development.