React Native Web

A library to build Web and Mobile Applications using a single codebase.

Why React Native Web?

One of the most difficult decisions to make when designing a new application 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 you could provide your customers is for your app to work on all platforms with a minimum time and cost investment.

We already know how React Native can help make iOS and Android apps with a shared codebase, without any sacrifices in quality. But, what about the web? This is exactly the problem the React Native for Web project is trying to solve. With React Native Web, we are now able to write Mobile and Web applications using a single codebase. So, let’s dive into it!

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, execute the following commands to create a sample React Native Web application.

Prerequisites:

To work with iOS and Android, it is recommended to install Xcode and Android Studio (not required, but it will make it easier when you’re working with a production level or a large scale project).

iOS Troubleshooting

After setting up the above, the Web and Android applications work fine. However, in the case of iOS, you may need to do some configurations.

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

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

The below steps can resolve this error.

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

During run time you can get the following error.

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 of the above configurations are completed, and if all is okay, you will see the following screens for the respective platform (see Figure 2a and Figure 2b)

Dependencies

Let’s start discussing necessary packages for React Native Web.

At this point, your package.json will look like the following,

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 apps’ 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 Android, iOS, and Web platforms. For this, you can use Platform specific code:

Another option is the separation via file ending. You could create a component with code specific to 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 and 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 will look like the following.

Creating Screens

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

First screen
Second screen

Above is the code for the first screen, which is a simple text and a button. The button when clicked should go directly to the second screen.

The second screen is the same as the first screen. Both of the screens have a button which takes you to the other screen.

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

Now let’s create a react-router-dom navigation to connect these two screens together on the web.

The first screen is the default screen of this navigation.

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

Now run the app. The following screen should come up on the display, if all goes well!

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, by simply entering a URL.

In the browser, by clicking the Go to second screen button, the URL should change to http://localhost:3000/second.

Conclusion

React Native Web is one awesome library, which can be used to run an application on a phone or a browser by using a single codebase. React Native for Web creates all possibilities to run its components and APIs on the web by using React DOM.

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

References

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

Chamalka Gamaralalage

Software Engineer