React Native for Web – Write Once, Run Anywhere

Web and mobile development is growing and changing very dynamically.

These two are separate worlds, but they have a lot in common, and they are crossing constantly. Sometimes we are facing the problem of running the app in a different environment. We can handle Android and iOS devices with React Native, but we actually have to keep another codebase for the web.

What if I tell you there is a remedy for that?

What if you can create an app that is platform agnostic and run it no matter if it’s a mobile device or browser?

Thanks to React Native for Web it’s possible!

What is React Native for Web?

React Native for Web was initially created by Nicolas Gallagher, former Twitter employee, to create the Twitter Lite PWA. In this case, it makes it possible to run React Native components and APIs on the web.

Wait, what?

Isn’t it React DOM’s job to make things work on the web?

Why should we use anything that was originally created for another purpose?

The answer is: because React Native for Web gives us something extra.

It allows us to create an application that runs on Android, iOS and browsers, sharing just one codebase.

How cool is that?

How React Native for Web works?

We should consider React Native as a pure UI language. It contains some basic components that define UI primitives.

What are the primitives? It’s a set of building blocks for the UI.

In React Native, all the components we can create are based on primitives like “<View/>” or “<Image/>“. They represent elements that make sense for every visual interface, no matter where it’s run. The core difference between React Native primitives and DOM primitives is the fact that DOM primitives are meant to create some structure of the HTML, and React Native primitives are just describing the UI.

With that knowledge, let’s take a deep dive into the “<Text/>” primitive.

Depending on the mobile platform, React Native is providing us with native functions and views, in this case “TextView” on Android and “UILabel” on iOS.

Knowing that React Native can define some UI primitives, it is possible to transform them to the DOM language by using HTML tags.

This is where React Native for Web comes in, and allows you to render the “<Text/>” as “<span/>” in the browser!

Why using React Native for Web?

If you ever worked with projects that share a lot of stuff between each other, you might love the core advantage of this library: you can write your code just once, and share it across multiple platforms.

The other big advantage of this solution are native-quality interactions. No matter if you are using it on your personal computer, browser in your smartphone, or native version of the app, you have the support for multiple input modes, like touch, mouse or keyboard. For example, if you create a <Button/> with an onLongPress property, it will be handled on all the platforms.

Another good news is support for accessibility. React Native for Web includes APIs that help developers to create more accessible apps. The best supported accessibility features of the web are exposed: accessible, accessibilityLabel, accessibilityLiveRegion, accessibilityRole, and importantForAccessibility. Why should we care about this? To make sure every single user of our app has equal access to it.

There are also some other features that might help developers create great universal apps, like RTL support. Application layout can be automatically flipped to support right-to-left languages.

It’s also worth mentioning that React Native for Web supports server side rendering, and you can integrate it with some popular tools like Gatsby or Next. If you are interested in that, you should check the examples in React Native for Web repository on Github.

To sum it up, React Native for Web advantages are:

• one codebase to share across platforms and devices
• native-quality interactions
• support for accessibility
• RTL support
• Server Side Rendering Support
• Integration with Static pages
• and more interesting features

How to use it?

If you want to try it, I truly recommend using Expo. From SDK version 33, the projects bootstrapped with the Expo CLI have had web support from the start. It’s also possible to use a well-known create-react-app, or even running it with your standalone app with webpack and babel.

As I mentioned earlier, the library allows us to use React Native components and APIs across the web. Let’s take a look at the possible use cases of APIs.

One of the most popular of them are StyleSheet and Platform.

The first one allows us to create css-like styles in the native app, and the second one helps with code execution based on the platform. The great news is that we can use both of them also with React Native Web:

import {Platform, StyleSheet} from ‘react-native’;

const styles = StyleSheet.create({
    container: {
        height: Platform.OS === 'web' ? 250 : 100
    }
});

It’s also possible to import the whole different file based on the platform, and for that you can use it as in the example below:

ComponentName.android.js
ComponentName.ios.js
ComponentName.web.js

There is also support for other APIs that you can use across all the platforms, like Linking, Dimensions, or AppState.

When it comes to components, most of them are ready to use on the web. Just a few of them are not finished yet (June 2020), like Modal, RefreshControl, and TouchableNativeFeedback, and some of them are just mocked because of lack of the equivalent on the web API, like KeyboardAvoidingView and StatusBar.

Some popular UI kits are also adopted to use on the web. If you are looking for a ready-to-go set of the UI components you can share across all platforms, you can try UI Kitten or Nativebase. They have really good support for the web and if you need them, you can easily set them up with your project.

If you want to quickly create an app with a few screens, I have another great news for you: react-navigation is also supporting the web! It’s still experimental, requires lots of improvements from the library developers, but it works on the browser.

If you are running your project with Expo, you can use a lot of goodies the Expo SDK is providing. A lot of them are compatible with all the platforms and can save you hours of coding. For example, you can use Camera or Location with just a few lines of code and you’ll be able to handle them no matter the platform is.

I personally think Expo has a great support for universal apps and it’s the best way to start building them from scratch. But to actually do this, we have to ask ourselves probably the most important question when considering using React Native for Web.

Are there any limitations?

And unfortunately, the answer is: yes, there are.

And they can make you decide that it’s not the technology that fits perfectly to your project.

Why? Because if you know that your project will contain some libraries that rely on native dependencies, they won’t work on the web. And even if you use only libraries that are free of native dependencies, you can’t expect them to work 100%.

You should also keep in mind that not all the React Native APIs are available in the browser. Some of them are still in progress, and some don’t have an equivalent in the browser.

And don’t forget that even if mobile and browser have some things in common, they are still different environments, so you may end up creating a lot of platform-based conditions to handle all the things correctly.

What does it mean for business?

There is still a lot that RNfW must go through, but the future is incredibly interesting and seems bright.

Technically we’ve learned a lot, but is there any impact that React Native for Web may have on the business side?

Why would any CEO, COO, CMO, CSO, CFO. give a green light to invest in it? What’s the future?

High-quality Web Interface

This enables you to:

• Build complex apps easier
• Enhance User Experience largely
• Perform better SEO-wise
• Execute the interface the way you truly want it

Write once, render anywhere

And this enables you to:

• Build app that will work on iOS, Android, and any device simultaneously
• Shorten your MVP time-to-market
• Save (time and money) on development
• Save (time and money) on maintenance
• Build truly futureproof app

There are even more interesting reasons to use React, and reasons to use React Native that you may find inspirational while choosing your tech stack.

Conclusions

Is it worth using React Native for Web?

If it fits your project and your requirements as a developer, I think it’s a good way to go.

As you can see above, there are some cons of this solution, so the key to success is to recognize if they are not affecting your project.

I think React Native for Web is a big thing and it may revolutionize the way we create universal apps. With the amazing support of Expo, it can save developers a lot of hours of work, and most importantly, save the companies a lot of money.