Ionic React vs React Native
Ionic React and React Native are two great options for building apps, but they differ in some important ways. We explore the differences in detail and make a recommendation on which one your team should adopt.
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.
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 Amtrak, AAA, Burger King, Home Depot, and more.
What is React Native?
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.
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.
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).
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!
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 Solutions Architect at Ionic or give Ionic React a try first.