Are you developing a cross-platform app? Confused in choosing among ionic and react native frameworks? No worries! Here’s all that you should know, before you develop your cross-platform app.
Ionic is based on Angular, whereas React Native on React. Ionic is easier to learn & work with for smaller projects as compared to React. As React follows stricter paradigms & design patterns, it is easier to maintain for larger projects & teams. A step up, Ionic is a gentle to learn & work, and it also cross-compiles to both, iOS and Android (since it’s just Webview) by per-device differentiator classes to theme accordingly – write once, run anywhere. React Native doesn’t have this treat – their motto is “learn once, write anywhere” – implying you can use the same framework, & maybe even shared components, but you have to maintain separate code for your iOS & Android apps.
In the below section, we have compared Ionic to React Native based on the following criteria:
Quality
Ionic uses Cordova, which purely boosts your system browser to render your application (called Webview). However, as compared to native, it still is a noticeable performance difference. React Native is a different breed than hybrid. The code in react components are rendered as native UI components in the mobile app. The app logic is still JavaScript, but app logic is never the performance bottleneck of hybrid frameworks – it was UI. So while React Native will take much more learning, effort, & maintenance – it will also give you a higher quality app.
File Size
Ionic wraps current web app into a mobile app. It uses the existing android web view to render the app so the file size is quite smaller. Meanwhile react native forms a link between native component & javascript. The main framework size is fairly big.
Plugin
We can add third party plugin via React Native Modules. The drawback of using web-based map view is it takes longer to load & memory usage is higher. On native map view we can use 3d map features for map view, like zooming, rotating, & compass.
Besides map view, we can also modify the color of status bar.
Memory Usage
Memory usage is quite important factor, especially for low end android devices. We should always try to keep the memory usage low as possible, so that the app can run effortlessly on every device. To do a memory usage comparison, we can use below command:
adb shell dumpsys meminfo
Usually the apps run smoother on react native.
Performance
The last comparison is performance. The Ionic apps are slower when using maps, since they need to download from the Google Map server, whereas in react native gmap, it caches the tiles so it loads faster. The drawer & the transition runs smoothly on react native app. One can get the true native feels in react native app.
The great feature of react native is that we can use every client based javascript modules from npm (node package manager). And the good news is that we can also use the existing cordova plugin to our React Native app. This is really cool when we can reuse our previous component.
