REACT NATIVE VS IONIC: WHICH ONE IS BETTER?

REACT NATIVE VS IONIC: WHICH ONE IS BETTER?

 

Hybrid and native apps

In this article we will discuss the main differences between Ionic and React Native. Before starting the comparison, let’s talk about what native and hybrid apps are.

Native apps are developed using the native languages of the platform. If we talk about Android it is Java, if about iOS – ObjC and Swift. Hybrid apps combine the capabilities of native and web apps. Hybrid applications are developed using JavaScript, HTML and CSS and execute the same code regardless of the platform in which they run.

hybrid

Comparison & Benchmark

At the moment there are many frameworks for creating hybrid mobile apps. The most popular and flexible of them are Ionic and React Native. Below we will consider the differences between Ionic and React Native. In this article we will talk about the next comparisons: plugin, memory usage, file size, demo video.

REACT NATIVE VS IONIC

 

Plugin

The first criterion of comparison between Ionic and React Native is the plugin. Let’s start from Ionic. There is a high chance that a plugin which you need is already exists, because Cordova and PhoneGap have been around for a while. They expose the native features for webview. Some plugins are available for React Native too.

A lot of plugins are already available on NPM for React Native. If some plugin does not fit your criteria then you can easily create a new one yourself.

Memory Usage

The next comparison is memory usage, which is a very significant factor, especially for low end android devices. We should try to keep the memory usage low as possible, so that apps can run without any efforts on every device.

For memory usage comparison between Ionic and React Native on Android device, we use the next command “adb shell dumpsys meminfo”. For example, consider the Bus In Time app. After running the command above, we got the result.

terminal

Bus In Time app in Ionic Framework uses 84714 kB memory and React Native app uses 58585 kB memory. Therefore, the application will be run much faster on React Native.

 

File size

Ionic is a Cordova based app that wrap web app into a mobile app by using android web view to render the app. React Native create bridge between native components and JavaScript.

Back to The Bus In Time app. The Bus In Time app in React Native has the size of 8.22 MB and in Ionic is 2.88 MB. So, React Native app is quite big then Ionic app, but you can try to get the first one smaller using ProGuard (1-2 MB about).

 

Demo Video

In the first place the app should be fast and responsive. On demo video you can see how React Native app is faster and smoother than Ionic. React Native try to caches Google Maps so it loads fast, when Ionic loads map tiles directly from Google Map servers. And, of course, you can notice that sidemenu and animations between screens are smoothly on React Native.

Conclusion

After these comparisons we can say for sure that Ionic has advantages, but if you want really true native feels in your mobile app you should choose React Native.