Why React Native Web?

One of the difficult decisions while designing a new application development is its target platform. A mobile app gives you more control and better performance but isn’t as universal as the web. If you’re designing a mobile app, can you afford to support both iOS and Android? What about trying to build a mobile app and a responsive web app? Ultimately, the best experience for your customers is for your app to work on all platforms with minimum time and cost.

We already know how React Native can help you make iOS and Android apps with a shared codebase, without sacrifices in quality. But what about the web? This is exactly the problem the React Native for Web project is trying to solve. Instead of forcing you to maintain two separate code bases for your mobile and web apps.

So, let’s start

React Native Web uses its Web CLI as the main starting point when it comes to development.

React Native Web CLI

A simple CLI tool to start your React Native Web project to develop the same app for iOS, Android, and Web.

Installation

In the CLI, please do execute the following commands to create a sample React Native Web application.

Figure 1 — steps to create react native web application

Prerequisites:

To work with iOS and Android, it is recommended to install Xcode and Android Studio (Not required, but it is easy when you are working with production level or large scale project).

iOS Troubleshooting

After setting up above, the web and the android applications work fine, but for iOS, you may need to do some configurations.

While building the Xcode project, you might get the following error,

1. configure: error: in node_modules/react-native/third-party/glog-0.3.4' configure: error: C compiler cannot create executables

below steps can resolve this error,

  • under repo: cd node_modules/react-native/third-party/glog-0.3.4
  • ../../scripts/ios-configure-glog.sh

At the run time get following error,

2. unknown argument type ‘__attribute__’ in method

modify this file [project_folder]/node_modules/react-native/React/Base/RCTModuleMethod.mm

after this line

return RCTReadString(input, “__attribute__((unused))”) ||

add

RCTReadString(input, “__attribute__((__unused__))”) ||

Once all above configurations completed, if all ok, you may see following screens for the respective platforms (See Figure 2)

Figure 2 — default react-native-web web screen
Figure 2 — default react-native-web android and iOS screens

Dependencies

Let’s start discussing necessary packages for react-native-web.

At this point, your package.json looks like following,

Figure 3 — package.json
  • react-scripts: contains the scripts used in create-react-app.
  • react-dom: allows react-code to be rendered into an HTML page
  • react-native-web: the main source of magic in this app. This library will convert our react-native components into web elements.
  • react-art: a peer dependency for react-native-web

React Native Web is not supposed to be a way of moving all of your app’s code to the web. Usually, you want (and need) to have a different user experience when it comes to a web application. That is why you may need options for differentiating between the platforms android, iOS, and web. For that, you can use Platformspecific code:

Figure 4 — An example of platform-specific code

Another option is the separation via file ending. You could create a component with different code specific for each platform and still import it via import TestComponent from './TestComponent'

  • TestComponent.android.js for android
  • TestComponent.ios.js for iOS
  • TestComponent.web.js for web
  • or just any of those as a fallback, so that you have two files (one for web, another for mobile)

Ex: TestComponent.web.js TestComponent.js

React Native Web Navigation

Setting up navigation in react–native–web is challenging as the navigation system works quite differently in apps vs browser.

Navigation — Installation

Open your terminal, navigate to the project folder, and then run the following command:

npm install react-router-native react-router-dom

  • react-router-native: routing library for React Native
  • react-router-dom: routing library for React on the web

At this point, your package.json looks like following,

Figure 5 — package.json

Create a few screens

Now, let’s set up a few screens to test our navigation flow:

  • First screen
  • Second screen
Figure 6 — The First screen

The above is the code for First screen, which is a simple text, and a button. The button when clicked should go directly to the Second screen.

Figure 7 — The Second screen

The Second screen is the same as the First screen. Both the screens have a button which takes to the other screen.

Let’s also create react-router-native navigation to connect these two screens together in iOS and Android.

Figure 8 — The Mobile Route

And also create react-router-dom navigation to connect these two screens together on the web.

Figure 9 — The Web Route

The First screen is the default screen of this navigation.

Now, in the App.js file, simply render the Route Navigation.

Figure 10 — App.js for mobile
Figure 11 — App.web.js for web

Just run the app, the following screen comes up on display, if everything goes well.

Figure 12 — Navigation example mobile (iOS and Android)
Figure 12 — Navigation example (web)

When you click on the Go to Second screen button, it should take you to the second screen.

In the web navigation, it is extremely important to have the change in page reflecting in the URL as well. In the app, there is no way a user can directly jump to a screen other than the default screen, but in the browser it is possible, a user can enter a URL.

In the browser, Go to Second screen button click should change the URL to http://localhost:3000/second

Conclusion

React native web is one awesome library, which is used to run an application on phones or browsers just using a single codebase. React Native for Web make all the possibility to run it’s components and APIs on the web by using React DOM.

The code between Android, iOS, and Web could be mostly shared. Especially libraries like Redux or React Router could be 100% reused. A downside however is that configuring the projects can be very complicated.

References:

  1. React Native Web Git Hub URL: https://github.com/necolas/react-native-web

Senior Software Engineer at One Billion Tech (Pvt) Ltd. | Graduate in Computer Science, University of Ruhuna.