What is Ionic?
While Ionic apps are web based, they are still run through native platforms. You can distribute Ionic apps on respective app stores as native apps.
What about Ionic 2?
Ionic 2 is based on Angular 2, a complete rewrite of the original Angular framework. Angular 2 uses TypeScript.
What is React Native?
While React Native generates native components, Ionic generates web pages that only mimic native behavior. This means Ionic is more portable since the same web based code runs / renders consistently across different platforms. With React Native, components must be written specifically for the platforms they will run on. Although cross-platform design consistencies make this easier than it seems, React Native can’t boast the “write once, use everywhere” mantra that Ionic can.
Ionic’s portability advantage has it’s trade offs. Since Ionic’s hybrid apps are essentially websites running in native webviews, performance is slower than natively built components. Since React Native ultimately renders native components, it will generally run faster than Ionic apps. Despite the performance advantage, React Native still requires the developer to be concerned with platform specific behavior, whereas Ionic addresses this automatically.
Another key difference between React Native and Ionic is the frameworks themselves. Based on the Angular framework, Ionic implements an MVC approach to building components. This is drastically different from React Native which relies on JSX to create components. JSX blends business logic with presentation whereas MVC makes a clear distinction between the two. While Ionic follows a more traditional design pattern (MVC) it’s not without it’s own learning curve (especially with Ionic 2 being based on TypeScript).
Both React Native and Ionic have strong communities backing them, and for good reason. Both ultimately rely on connectors or bridging code. While Ionic leans on PhoneGap/Cordova for native feature support, React Native requires bridging components to access them as well. Remember that not all components available on native platforms have the equivalent bridges built out yet, a remaining key strength of native app development.
Which is best for you?
At the end of the day, both frameworks can be used to achieve similar results. Ionic gives you a web based hybrid solution but is ultimately more portable than React Native which relies on an understanding of platform specific behavior. Use Ionic if your team is web or Angular based. Use React Native if you have seasoned ReactJS developers on hand.
It’s also crucial to understand what you want your app to do before making a decision to use Ionic or React Native. For example, if your app will largely be read only, then Ionic may provide a quick way to generate browser based hybrid apps. If your app will rely heavily on native features, then choosing React Native may be better for it’s native component rendering.