React Native vs Ionic: A Side-by-Side Comparison
The purpose of this article is to highlight the most important conceptual differences between Ionic and React Native (RN), this will hopefully give you the information you need to make an educated choice about the stack that will work best for your project.
Hybrid and native apps
Native apps are developed in the language required by the platform it targets, Objective-C or Swift for iOS, Java for Android, etc. The code written is not shared across platforms and their behavior varies. They have direct access to all features offered by the platform without any restriction.
Native, or hybrid?
Ionic is a typical hybrid development framework. It uses web technologies to write and render the application, and requires PhoneGap/Cordova bridges to access native features. Then it will try to reproduce native behaviors to provide the best user experience.
What about Ionic Native you’re asking? Don’t be mistaken by the name. Ionic Native is a new name for what used to be called ngCordova. It’s simply the new Ionic way to use existing Cordova and PhoneGap plugins. Ionic Native will not make your app native.
The hiccup is that this only works when the bridging components have been written for React Native. A decent set of native components is provided by default, but if you are a native app developer, do not expect to find all the components you are used to.
While the result of RN is native, it requires bridge components to be written for each platform in order to use them, which brings it back closer to a hybrid framework.
Write once, run everywhere
A typical hybrid app will run the same code regardless of the platform, and that is what Ionic is capable of doing. However, in order to feel more “native”, Ionic will adapt a few of its behaviors according to the platform. If you use tabs, they will be displayed just as recommended by the platform—at the bottom of the screen in iOS, and at top in Android.
The goal of RN is not to provide a way to write once, and run everywhere. Rather, they want developers to use the components which best follow the native behaviors of the platform. For example, Android has a highly customizable toolbar; iOS does not. You can use the toolbar for Android but you’ll have to use something different for iOS. Don’t worry, many components have an equivalent; and if there’s no equivalent, it’s easy enough to separate the platform-specific logic.
With Ionic, you definitely do not have to worry about platform-specific behaviors. But with React Native you may have to in order to provide the most seamless experience for your users.
The language stack
With Ionic you will be in a more familiar territory: classic HTML and CSS. With React Native, you will have to learn how to style and create your user interfaces using their own HTML-like components, it’s not hard, but it’s new.
Fig. 1: Snippet of React’s JSX on the left, Ionic 2 template on the right.
Testing during development
When developing an app, it is very important to get immediate feedback. There is nothing more frustrating than having to wait a while to see if two pixels of margin is looking good or if three pixels is better. With Ionic, you can instantly preview your app in your browser and mobile devices. It instantly refreshes as you make changes to your application.
Forget about testing in your browser, RN produces native rendering remember? That’s not a problem though, with React Native you see the result of your modifications as you make them. No need to recompile, rebuild, etc.; the result is instant in an emulator or a real device. Pretty amazing!
Both are brilliant—but a little different—in that regard. Instant feedback you want; instant feedback you’ll get!
What else do they come with?
Working with Ionic is a bit like working with a CSS framework like Bootstrap. It comes with lots of components that are pre-made and pre-styled. You want to display a list of items, and for each you need an avatar, a little description, and a date? Done, they have a component for that!
As React Native wants to rely on native behaviors, they typically do not try to replicate them. The styling is for you to do. Most of the time, only the components which already exist natively are available, rarely non-native ones. However, if you want to write a true native component and use it in your views, you can do so with React Native.
Ionic clearly gives you a head start here. Do not worry too much about the styling, apply a few classes and you’re good to go.
Plugins and community
When I choose an Open Source project to use, I find it very important to assess how vivid the community around it is. This directly impacts how easily you can find information online, answers to your questions, or getting bugs fixed.
PhoneGap and Cordova have been around for a while so there is a high chance that a plugin already exists to expose the native feature you need in your webview. They also have a marketplace where developers sell, and offer, Ionic plugins.
A lot of plugins are already available on NPM for React Native. There’s even a plugin to use PhoneGap/Cordova plugins, which means that you instantly inherit the hundreds of mature plugins from the other community.
As of this day, React Native has more stars on Github than Ionic, about 36,000 vs. 25,000, respectively. Though, Ionic has more questions on Stackoverflow than React Native. They also inherit the community they are based on, namely Angular and React. We can safely say that they both have a very healthy ecosystem.
Both Ionic and React Native support Android and iOS. And for bonus points, Windows Universal Platform support officially comes with Ionic 2, and is currently maintained as a separate plugin for React Native.
React Native vs Ionic: Which is better?
I can’t tell you which is better because I firmly believe that it depends on many factors: you, your project, your user requirements, the acquired skills of your team, etc. They both do different things, and both do it well. It’s like comparing an Xbox and a Playstation, MacOS and Windows, a car and a motorcycle. Neither is better than the other.
However, I can tell you which one I prefer. It is React Native. I personally value the native rendering more than the rest. To me, apps need to be extremely fast and responsive, and in React Native, I have found a good compromise between writing pure native applications, or pure hybrid apps.
Now, my best advise to you is to try them out both, pick one, and make the best out of it!
Psst. If you’re interested in a code comparison, I wrote a very simplistic todo app for both Ionic and React Native on Github.