Universal Native Apps with React Native

The Checkered Past of Cross-Platform Development

Which platform shall we target? This question has been a fundamental consideration since the earliest days of software development. The platforms in question have changed over the years and the technologies available to target those platforms has also continued to change and evolve. Heading into the year 2020, the prime candidates for application developers are iOS, Android, and the web browser. Modern users typically interact with software via an app on a phone or tablet (i.e. Android, iOS) or a web browser (e.g. Firefox, Chrome, Edge). Native Android apps can be developed using the Android SDK with Java or Kotlin. Native iOS apps can be developed with Xcode and Swift. Browser apps can be developed using any number of technologies (e.g. React, Angular, Vue), JavaScript being central to all of them. We head into 2020 with three prominent platforms, each with its own distinct technology stack.

Naturally, creators of software want to reach as many users as possible. This means targeting as many platforms as possible, ideally with minimal investment of time and energy. As a result, technologies designed to target multiple platforms with a single code base have been omnipresent. Technologists of a particular vintage will remember "Write Once, Run Anywhere" (WORA), the slogan created by Sun Microsystems for Java. Unfortunately, this slogan was better in theory than in practice, resulting in the rejoinder "Write Once, Debug Everywhere." The unfortunate reality is that cross-platform software development is tricky. The good news is that the tradeoffs and compromises involved are fairly well-known by now (see Wikipedia). With all this in mind and our skepticism engaged, we are now ready to explore the current landscape of cross-platform applications.

The past decade has seen a number of technologies and techniques designed to facilitate cross-platform mobile/web app development, some more effective than others and each with their own strengths and weaknesses. One technology that looks particularly promising at present is React Native.

Considering React Native

The history of React Native is somewhat confusing, so a high-level overview is in order. In 2013 Facebook publicly released React, a JavaScript library for building user interfaces for HTML-based web apps. Reacts approach to UI development (components, JSX, unidirectional data flow, etc.) proved very popular and resulted in widespread adoption within Facebook and amongst the web development community at large. Subsequently, Facebook discovered a way to bring this same style of JavaScript-based user interface programming to iOS and Android devices, and they released this technology as React Native in early 2015. Key to React Native's ability to target both iOS and Android was the introduction of a new set of "native components." These native components act as a layer of abstraction on top of platform-specific UI elements. For example, many React Native applications will make heavy use of the native Text component. On iOS this will ultimately be rendered as a UILabel, whereas on Android, this will be rendered as a TextView -- but the developer simply uses "Text" and React Native takes care of the rest.

Up to this point, we have two very similar libraries targeting three very different platforms (React for the browser platform, React Native for iOS and Android). Enter the confusingly-named React Native for Web. Shortly after the release of React Native, a developer at Twitter began the work of bridging the native components of React Native over to browser-specific UI elements (extending our previous example of the native Text component, React Native for Web might ultimately render it as an HTML span element). The creation of React Native for Web opened a new possibility: a single code base targeting React Native, resulting in an application deployable to iOS, Android, and the web. Write Once, Render Everywhere. For a great entryway into this world, check out Expo.

Conclusions

Cross-platform application development with React Native is no silver bullet. Recall the healthy skepticism and well-known trade-offs and compromises we discussed previously. Browser apps and mobile apps have some fundamental differences, after all. For example, browser apps are still typically navigated with mouse and keyboard, whereas mobile apps are typically navigated by touch. Furthermore, navigation through a browser app is typically different from that of a mobile app (think URLs and links). That being said, for some applications, using React Native to target both mobile platforms and the browser is a great way to achieve a single code base with minimal platform-specific customizations.