Ionic React vs React Native: What are the Differences Between Them?

The React ecosystem has two major ways to build cross-platform mobile apps: Ionic React and React Native. However, the two projects have different goals, features, and capabilities, and it’s important to understand the differences before investing in one.

In this article we outline the differences between the two projects and make a recommendation based on the type of apps your team is building, the skillsets of the engineers on your team, and the importance of enterprise support and functionality. So, what is the difference between Ionic React and React Native?

Grab our free Hybrid vs. Native guide to see how you can build cross-platform mobile apps with the web.

What is Ionic React?

Ionic React is an open source UI and Native API project consisting of cross-platform UI components and native functionality for building iOS, Android, Electron and Progressive Web Apps using React and standard web technology.

Ionic React is the official React version of the popular Ionic Framework, used by millions of web developers and powering mission-critical apps for companies like T-Mobile, America’s Test Kitchen, Schneider, Medical Answering Service, Yara International, IBM, and more.

> Try Ionic React

What is React Native?

React Native is an open source project released in 2015 by Facebook with the goal of adding iOS and Android UI control rendering through React and JavaScript in order to speed up app development at Facebook. React Native can be embedded into existing native apps or used to build apps from scratch.

Because React Native does not use DOM elements for rendering, it requires using a different rendering library than traditional web-based React.

React Native is used at companies like Shopify, Facebook, and Wix.

> See the performance comparison between Ionic vs. React Native.

Difference: Web vs Native

Ionic React is web-first, meaning that it implements native iOS and Android UI patterns using cross-platform, standards-based web technology instead of accessing platform UI controls directly.

In contrast, React Native provides an abstraction through React that controls platform UI controls directly. 

There are some benefits to React Native’s approach. Since React Native uses mostly standard iOS and Android controls under the hood, in some cases performance may be higher. Additionally, interfacing with an existing native app’s UI controls is easier. Apps created with React Native will look the closest to stock platform apps out of the box.

There are a few downsides to this approach, however. Native controls are harder to customize than most web developers and designers are used to, so they may find React Native apps more challenging to design custom UI experiences with. Since React Native is not a true browser environment, standard CSS, HTML, and DOM techniques can’t be used (though React Native does have a CSS-like utility). Additionally, existing React web code and libraries likely won’t be portable to React Native without heavy customization.

This also means the development process for each is different. Ionic React is the most similar to traditional React web app development since Ionic React apps are React web apps. That means Ionic React will offer a web developer a fast and familiar development experience directly in Chrome or their browser of choice, and many apps can have a significant portion of their functionality built right in the browser. Ionic React can also easily be added to any existing web-based React app.

React Native does not use traditional web development tools directly but does have some custom support for integrating with a Chrome debugger, but will require running in an emulator or on device unlike Ionic React and will not be a true browser debugging experience.

Finally, because Ionic React is based on web technology and the entire web platform, it doesn’t require making a bet on a new platform. Chances are your team is already heavily invested in the web platform. React Native, in contrast, is a self-contained platform and ecosystem and must be self-sufficient in order to succeed in the long term.

Difference: React DOM vs React Native

React itself is an abstract UI library that supports multiple platform rendering libraries. The two main ones are React DOM (react-dom on npm) and React Native (react-native on npm), and they are not compatible.

React DOM is, by far, the most popular rendering library for React. By today’s numbers (Feb ‘20), React DOM is installed 25M times per month compared to React Native’s 1.4M, which is an 18x difference.

This distinction is important because React libraries must explicitly support specific rendering libraries. Given that React DOM has considerably more usage, it makes sense that most library authors target it first. Thus, React DOM has the broadest compatibility with the React ecosystem. React Native developers, in contrast, will have to find libraries that explicitly support it.

This means that Ionic React will likely Just Work with any React library now and in the future, but React Native may not.

Difference: Progressive Web App support

Progressive Web Apps are a new standard for building rich, native-quality mobile apps but distributing them through a web browser instead of an app store. Progressive Web Apps have benefits for user engagement, search engine optimization, and shareability, and are becoming popular for consumer and enterprise apps.

Another difference between Ionic React and React Native is that Ionic React has first-class Progressive Web App support, while React Native does not support Progressive Web Apps officially at all.

If Progressive Web Apps are in your team’s future plans, it would be worth starting with Ionic React, which would let your team build and distribute an app to iOS and Android app stores and to the web as a Progressive Web App at the same time and with the same code.

Difference: Cross-platform Support

React Native is a UI library with official support for iOS and Android app store apps only (there are some unofficial projects that add desktop and web support). In contrast, Ionic React officially supports iOS, Android, Electron, and the web using Progressive Web App technology.

React Native takes a “learn once, write anywhere” approach, while Ionic takes a “write once, run anywhere” approach. With React Native, developers learn one set of concepts (in this case, React with the React Native flavor), and then build UI screens specifically for iOS and specifically for Android.

In contrast, Ionic React apps run the same UI on all platforms, utilizing responsive web design, CSS, and platform-detection utilities to enable developers to customize an app for specific platforms if they choose.

Additionally, Ionic React uses what the Ionic team calls Adaptive Styling to map core UI concepts like navigation, tabs, toolbars, and buttons to platform expectations (such as Material Design), while still enabling full designer customizability. React Native requires developers to build screens specifically for each platform.

Similarity: Native Access and Functionality

Ionic React and React Native apps both have full native access and capabilities, since both projects create real native app projects and binaries.

This is a point of confusion since many people incorrectly believe that web-based mobile apps are not actually native apps. A web-based mobile app using Ionic React will simply perform more work in a native WebView control but is ultimately part of an actual native app UI hierarchy and can access all native APIs, call native code, and use any native control (though not directly in the WebView).

Additionally, many people have the misconception that React Native apps are “compiled down to native” which is not true. Both Ionic React (through Capacitor or Cordova) and React Native execute JavaScript at runtime as opposed to being pre-compiled. However, Ionic React has access to advanced Just In Time compilation for JavaScript available in most Web Views that React Native does not (JavaScriptCore does not offer JIT unlike WKWebView, for example), meaning JavaScript is compiled to machine code at runtime for native performance for Ionic React apps.

Ionic React uses a project created at Ionic called Capacitor to enable developers to call native code directly from JavaScript, and exposing new native functionality or displaying Native UI is easy. In particular, Capacitor’s first-class support for Swift makes building native functionality for iOS much easier than in the past and easier than React Native’s Objective-C focused layer.

However, both make it easy to extend an app’s native functionality and developers shouldn’t find any roadblocks with any approach.

Thus, Ionic React and React Native have nearly equal support for running native code and accessing Native APIs, though each take a different approach to get there.

Difference: Enterprise Support and Functionality

Ionic React is truly unique in the mobile ecosystem in that it is backed by a business dedicated to helping teams build and scale mission critical apps. In contrast, React Native is an internal Facebook project built to improve Facebook’s app development process, with no commercial or enterprise business behind it.

Today, Ionic works with hundreds of medium-to-large enterprises building consumer facing and employee facing mobile and web apps that reach millions of users and drive billions of dollars in revenue. Ionic’s entire business is helping these teams be successful and offering a dedicated resource of app experts they can call on at any time.

Ionic also offers key enterprise native functionality that is supported and draws its priorities directly from enterprise customers. Such functionality includes secure authentication and identity management using advanced encryption APIs available on iOS and Android, high performance offline encrypted data storage, and a library of supported and maintained native functionality.

Last but not least, Ionic has a suite of Mobile DevOps features available in its Appflow product to help teams deploy app updates in realtime and add native app binary building to their CI/CD processes. Soon, teams will even be able to submit apps to the app store automatically as part of their workflow!

Conclusion

So, Ionic React or React Native? Ionic React and React Native are both great choices for mobile app development. For teams targeting iOS and Android only and with more traditional native developers or advanced JavaScript developers and an existing repository of native controls, React Native may be a better fit. This explains why React Native is popular with consumer app startups that have a history of native app development.

For teams that have traditional web development skills and libraries and wish to target mobile and web (as a Progressive Web App), Ionic React will likely be a better fit. This explains why Ionic has been successful with startups and enterprise teams with more of a web development history.

Additionally, for teams that need guaranteed support and dedicated enterprise functionality for mission-critical apps, Ionic React may be the only option given that it is one of very few platform companies in this space dedicated to the business of app development technology.

We believe both projects fill different needs in the ecosystem and will co-exist. We are happy to talk through which platform is a better fit for your team. Get in touch with a Ionic App Strategists to get started or try it out on your own first.

About Ionic

Ionic is the leading cross-platform developer solution with 5 million developers worldwide. It powers 15% of apps in the app store, not including thousands of apps built internally at enterprises for every line-of-business need. Ionic is unique in that it takes a web-first approach, leveraging HTML, CSS, and Javascript to build high-quality iOS, Android, desktop, and Progressive Web Apps.

Ionic is a leader in enterprise app development. Thousands of enterprise customers use Ionic to build mission-critical apps for their customers, both external and internal.