Why React Native?

Meta (formerly Facebook) created React Native to build its mobile applications. It was started as a hackathon project in the summer of 2013 inside Facebook and open sourced for everyone in 2015. The motivation to do so originated from the fact that React for the web was so successful. So, if React is such a good tool for UI development, and you need a native application, then why fight it? Just make React work with native mobile OS UI elements! Therefore, in the same year, Facebook divided React into two independent libraries, React and ReactDOM, and since then, React had to work only with interfaces and not care about where these elements will be rendered.

In this chapter, you’ll learn about the motivations for using React Native to build native mobile web applications. Here are the topics that we’ll cover in this chapter:

• What is React Native?
• React and JSX are familiar
• The mobile browser experiences
• Android and iOS...

Technical requirements

There aren’t any technical requirements for this chapter since it is a brief conceptual introduction to React Native.

What is React Native?

Earlier in this book, I introduced the notion of a render target, the thing that React components render to. The render target is abstract as far as the React programmer is concerned. For example, in React, the render target can be a string, or it could be the Document Object Model (DOM). Therefore, your components never directly interface with the render target because you can never make assumptions about where the rendering is taking place.

A mobile platform has UI widget libraries that developers can leverage to build apps for that platform. On Android, developers implement apps using Java or Kotlin, while, on iOS, developers implement Objective-C or Swift apps. If you want a functional mobile app, you’re going to have to pick one. However, you’ll need to learn both languages, as supporting only one of two major platforms isn’t realistic for success.

For React developers, this isn’t a problem. The same React components that...

React and JSX are familiar

Implementing a new render target for React is not straightforward. It’s essentially the same thing as inventing a new DOM that runs on iOS and Android. So, why go through all the trouble?

First, there’s a huge demand for mobile apps. The reason is that the mobile web browser user experience isn’t as good as the native app experience. Second, JSX is a fantastic tool for building UIs. Rather than having to learn new technology, it’s much easier to use what you know.

It’s the latter point that’s the most relevant to you. If you’re reading this book, you’re probably interested in using React for both web applications and native mobile applications. I can’t put into words how valuable React is from a development-resource perspective. Instead of having a team that does web UIs, a team that does iOS, a team that does Android, and so on, there’s just the UI team that understands React...

The mobile browser experiences

Mobile browsers lack many capabilities of mobile applications. This is because browsers cannot replicate the same native platform widgets as HTML elements. You can try to do this, but it’s often better to just use the native widget rather than try to replicate it. This is partly because this requires less maintenance effort on your part, and partly because using widgets that are native to the platform means that they’re consistent with the rest of the platform. For example, if a date picker in your application looks different from all the date pickers the user interacts with on their phone, this isn’t a good thing. Familiarity is key and using native platform widgets makes familiarity possible.

User interactions on mobile devices are fundamentally different from the interactions that you typically design for the web. Web applications assume the presence of a mouse, for example, and that the click event on a button is just one...

Android and iOS: different yet the same

When I first heard about React Native, I automatically thought that it would be some cross-platform solution that lets you write a single React application that will run natively on any device. However, the reality is more nuanced. While React Native allows for a significant amount of code sharing between platforms, it’s essential to understand that iOS and Android are different on many fundamental levels, and their user experience philosophies are different as well.

React Native’s goal is to “learn once, write anywhere” rather than “write once, run anywhere.” This means that, in some cases, you’ll want your app to take advantage of platform-specific widgets to provide a better user experience.

That being said, there have been advancements in the React Native ecosystem that enable more seamless cross-platform development.

For instance, Expo now supports web development, allowing you...

The case for mobile web apps

Not every one of your users is going to be willing to install an app, especially if you don’t yet have a high download count and rating. The barrier to entry is much lower with web applications: the user only needs a browser.

Despite not being able to replicate everything that native platform UIs have to offer, you can still implement awesome things in a mobile web UI. Maybe having a good web UI is the first step toward getting those download counts and ratings up for your mobile app.

Ideally, what you should aim for is the following:

• Standard web (laptop/desktop browsers)
• Mobile web (phone/tablet browsers)
• Mobile apps (phone-/tablet-native platform)

Putting an equal amount of effort into all three of these spaces probably doesn’t make much sense, as your users probably favor one area over another. Once you know, for example, that there’s a high demand for your mobile app compared to the web...

Summary

In this chapter, you learned that React Native is an effort by Facebook to reuse React to create native mobile applications. React and JSX are good at declaring UI components, and since there’s now a huge demand for mobile applications, it makes sense to use what you already know for the web.

The reason there’s such a demand for mobile applications over mobile browsers is that they just feel better. Web applications lack the ability to handle mobile gestures the same way apps can, and they generally don’t feel like part of the mobile experience from a look-and-feel perspective.

React Native has evolved significantly over the years, enabling developers to create more efficient cross-platform applications. While it’s true that iOS and Android have fundamental differences, React Native has made strides in providing a more seamless development experience across platforms. However, it’s important to remember that React Native’s...