React and React Native – What’s the Biggest Difference?

Article summary

My last couple of projects at Atomic Object have used React Native. Prior to those projects, I worked with React for an extended time. A few weeks ago, I was asked what the single biggest difference was between the two. I thought to myself, “They inherently serve different purposes.” React is used to build frontend web apps, while React Native is used to build cross-platform mobile and web apps, with an emphasis on mobile. While it’s probably fair to say that is the biggest difference, it wasn’t a satisfying answer. This caused me to reflect on my experience working with each library.

Dev Environment

It’s much easier to develop and run React apps than React Native apps. For React apps: install dependencies, start the dev server, and you’re all set.

React Native is more involved and there’s more that can go wrong. Since the whole point is to run platform native code via Javascript, the tools to build for those platforms must be installed. That means Xcode for iOS and Android Studio for Android. Even though most application logic of React Native apps is captured in the Javascript bundle, that bundle must be run by the native code. While building these native binaries tends to take some time, developers don’t have to rebuild on every change thanks to the React Native’s metro bundler and hot reloading. Testing native apps usually means having an Android emulator or iOS simulator installed as well.

Expo is a tool that aims to alleviate many of the inconveniences surrounding React Native. It has helpful features that I’ve talked about recently. Depending on a project’s needs and configuration, it’s possible to avoid most of these development environment challenges entirely.

Core Components

The general feel of developing with each library is the same. You create and compose components that render JSX. A key difference though is that React’s core components are HTML tags, while React Native defines its own set of core components. React Native’s core components map to Android and iOS native components (as well as HTML tags in the case of web).

In many cases, developers don’t use these components directly. React UI frameworks like MUI or Grommet, and React Native UI frameworks like React Native Paper or Tamagui, encourage the use of their library’s components in place of core components. For example, Grommet recommends using a Box instead of div to help apply the theme consistently, although it itself is implemented as a div.  Under the hood, these core components are the fundamental difference between the two libraries.

Enabling Features

Not surprisingly, the feature sets enabled by the two frameworks are different. In React apps, by way of plain ol’ Javascript, there’s access to browser APIs. This allow apps to use a limited set of device capabilities like camera, location, microphone, etc.  With React Native, Javascript enables access to iOS and Android SDKs. At this point, both the React and React Native communities offer a wide variety of packages that mostly exhaust the breadth of the capabilities of the browsers and mobile platforms respectively.

React Native apps provide a larger potential feature set purely because they run directly on mobile devices. Things that a React Native mobile app can offer that a React app cannot include: biometric authentication, robust push notifications, widgets, contactless payments, and Bluetooth.

Deployment

Deployment is probably the most glaring difference between the two. React Native deployment is more challenging because it, like managing the dev environment, is more involved and time-consuming. Given that owners intend for most mobile apps to appear in the App Store and Play Store, they must check a myriad of boxes before they can publish. Developers need accounts for each store. App and organization store pages require descriptions, screenshots, content ratings, and privacy policies, and the app must be reviewed by Google/Apple. All of this must happen before the app can go public. Overall, the React Native app deployments offer significantly less flexibility than the way React apps can be deployed in seconds with tools like Render or Fly.io.

React Native vs. React

If asked the question about the biggest difference again, I’d have a different answer. These were my four big takeaways, particularly relating to the developer experience.

Conversation

Join the conversation

Your email address will not be published. Required fields are marked *