As I have recently published my Ionic app CoffeeTrail into the iOS store. I wanted to share with you some issues I experienced while trying to upload it.
In total, the app was rejected twice due to lingering issues with my Ionic Native Geolocation plugin. These two issues were easily fixed although initially it wasn’t very obvious.
The first, was the lack of specificity when asking for the users location . A modal pops up asking for permission but I didn’t explain why I wanted to use their location. This goes against the iOS human interface guidelines which you can look at here.
I had to add two strings to my info.plist file. In order to do this, open up your iOS build generated from your Ionic project in Xcode.
Search for info.plist in your directory search panel:
And add these two strings with your custom location permissions message
After I added these custom messages my error modal looked something like this:
This fixed this initial rejection.
The second issue caused me the most trouble. Apple informed me that there was a second modal showing after the user already accepted the first location permissions one.
As you can see from above, the modal was giving a uninformative output path as my app name, which Apple deemed unfit for a user to see, which is fair enough as its a bit of a eyesore for the user.
This was not a custom made modal so it was coming from a native plugin, turns out it was one of two reasons
My Ionic Native Geolocation plugin was outdated
The Geolocation plugin was not correctly put into my iOS build output.
When you have added a plugin to your projects config.xml file, it won’t necessarily build into your platform of choice when you run the build commands.
These are the steps I had to run to rectify this:
ionic cordova plugin add cordova-plugin-geolocation--variable GEOLOCATION_USAGE_DESCRIPTION="To locate you"
So now our Geolocation plugin is updated with the latest version and with a custom location usage description
Next we need to remove our iOS platform:
ionic cordova platform remove ios
Then we need to save all our plugins:
ionic cordova plugin save
Adding the iOS platform back in now will also add in all our saved plugins from Cordova:
ionic cordova platform add ios
To make sure you now have the correct plugins run the command:
ionic cordova plugins-l
And compare that list to the plugins in the your build output folder:
These were the two obstacles I had to overcome to get Coffeetrail in the iOS store. Feel free to try it out and give feedback. As I’ve mentioned already it was rejected twice. On my third submission there was an extra processing time so thats something to be aware of if you want to be extra careful when submitting after that. Took an extra 4 days to be looked at.
I feel after finally submitting it I’m ready to undertake a React Native application.
The mobile app development market isn’t what it used to be for developers. In contrast to 5 or 10 years ago, the Android and iOS stores were locked to you as a developer depending on your ability to learn the native languages related to either option.
We are now given a plethora of choices when it comes to determining the right technology that you want to create your applications with.
These choices are usually categorised as either WebView app development (Ionic, Xamirin) which runs an app through a web browser on a mobile phone. Or native app development (React Native, NativeScript) which use core native components through an API to run in a mobile application.
In this post, I want to compare Ionic to React Native, as personally, I would consider both to be key frameworks in each of their respective fields of hybrid app development.
If your looking for a learning resource for React Native you can look here.
I have also published my Ionic app to the Android store (soon to be iOS as well) so fell free check it out if your keen on seeing an Ionic app in action.
TypeScript can also be used in React Native but will take another step to setup initially or you could just check out this template here.
React Native is based on React.js a very popular frontend development library. Its focus is on its reusable components that are shared between mobile and web versions.
I wouldn’t be too concerned either way here, if you are a fan of Angular and how it scaffolds its projects, services and components then Ionic might be more appealing.
On the flipside if your already familiar with React.js’s style of functional programming than React Native will just be a continuation of that with its own style of native mobile components.
Ease of use
A lot of the ease of use of an Ionic application can to attributed to the readily available list of Native Components and its CLI generator.
Ionic provides these native components plugins such as Geolocation or Google Maps with relative to ease to install.
Simply add them using Cordova (which comes with the Ionic framework)
ionic cordova plugin add cordova-plugin-geolocation--variable GEOLOCATION_USAGE_DESCRIPTION="To locate you"
And then import them into your project using ES6 import syntax.
// data can be a set of coordinates, or an error (if an error occurred).
The documentation for these native plugins is actually quite verbose and its clear how you can utilize various additional methods to get the most out of your desired plugin.
In contrast to this React Native uses APIs that are accessed through the global navigator object. You can then call any relevant methods that are related to the native functionality that you want to use.
On the navigator.geolocationobject you can call any of the following methods getCurrentPosition(), watchPosition(), and clearWatch().
Check out the full list of React Native API’s here.
Overall, I think I’d edge towards Ionic on this one. Apart from the wide range of documented plugins. The core CLI in combination with Cordova gives you plenty of commands and tools to generate resources, splash images, building tools as well the recently released Ionic Dev which provides you with an app to test your creation on any device you want.
For me, these testing tools allow a dev to access a wide range of devices and increases the accessibility of using Ionic over React Native.
Perhaps the most defining aspect when comparing both of these technologies, performance is always a big worry when dealing with hybrid mobile applications.
This is where React Native truly stands out. React was fast to begin with and was even comparable to natively developed app speeds for the most part. However with the release of React Fiber it is now much more responsive to browser events.
Not only this but Fiber assigns different priorities to different types of UI updates with the more important ones taking priority when React re-renders.
For a more detailed guide to React Fiber I’d recommend this post here by Mark Cruz.
To summarize, React Fiber works smarter, not necessarily faster. The priority given to more important tasks results in a faster application.
In comparison to this Ionic is still not bad performance wise. In fact, it has come an awful long way since its first version.
Ionic 3 was released with lazy loading modules taken from Angular. This has certainly increased initial loading times of the application as well as subsequent loading of pages and assets.
Lazy loading enables the app to only load the modules that it needs at any given time. A great feature undoubtedly but still isn’t up to snuff when compared to React Native’s native component library.
Due to of some platform specific code segments of React Native, the ability to maintain an application is a bit more difficult. Whereas in Ionic, a functionality change for example, will be reflected in both iOS and Android builds, for the most part anyway.
Here is a snippet of how to target Android exclusively in React Native:
console.log('Running on Nougat!');
Importing and using the Platform module is probably the exception rather than the rule here, the majority of React Native components have both an iOS and Android equivalent so in most cases this shouldn’t be necessary.
Its definitely not difficult to target platforms like this but it seems more frequent in comparison to Ionic where I very rarely found myself using platform specific code with the exception of styling some components.
The bundle size of your application plays a big role in defining how big or small your .apk and .ipa files will be. I found Ionic to have smaller bundling size overall.
Without doing statistical comparisons for both on compilation code and bundles (which I’ve struggled to find in 2017) theres not much to say here really, React Native’s component library tends to be heavier and this is the price for a faster and closer to native application.
Which is best for you?
Overall, theres quite a lot to digest here. While both are great platforms to launch your app the overall performance benefits for React Native as well as its recently released fiber potential really edges for me.
This really opens up how powerful React Native can be with significant performance enhancements when compared to Ionic.
But don’t get me wrong Ionic really shines in its own way, its fundamental paradigm of write once, use everywhere allows you to usually have consistent code between your iOS and Android versions.
In this way, React Native is more work for its platform specific code but even with this in mind, for me, the performance of React Native still outweighs this benefit.
I have had much more exposure to Ionic thus far but with my recent projects using React.js and Redux, I’m really looking forward to applying this way of functional programming to create apps.
At the end of the day, you can use both platforms to achieve your hybrid application goals. They certainty differ, with React Native really nailing performance and Ionic providing more accessibility.
They both also have a great communities to boot so until one becomes miles ahead of the other your not doing yourself any disservice to your future applications by picking either one.
So if you feel like getting started on either one, I’ve included some sample tutorials that I’d recommend:
As I have got to terms with many of Ionic’s development ways I have encountered a whole host of different errors that has slowed my development down.
In many ways, this is key to learning the framework, however I thought I’d share some of the more frustrating moments that I encountered so that a developer may be able to be more aware in his/her app building process.
Again, if your looking to expand your Ionic knowledge I highly recommend this Ionic 2 cookbook.
These mistakes stem from an app that I made called CoffeeTrail.
It’ll be on the iOS store very soon but be sure to check it out on Android here.
The Ionic framework is built on top of Apache Cordova.
Cordova is responsible for packaging your HTML5 app as a native app that can run in Android, iOS, and other platforms. They have documentation that is both informative and verbose and should be read frequently when experiencing bugs and errors.
This seems to be relatively simple idea but one I was consistently ignoring at the start of my development. Whenever I would search for specific Ionic errors I would limit my search to all things Ionic, including the Ionic forums, stack overflow etc.
And any time you want to generate a Apple keychain file or p12 from a Windows machine have a look at this guide here.
Once finished you can view your application via the Ionic View app here.
This is very useful for testing your application across a wide range of device since you are testing it on a server just download the Ionic View app onto your desired device and test it out.
Ionic 3 Configuration
Just because we are developing hybrid applications does not mean we don’t have to still specifically cater to each platform in some shape or form. I quickly found this out when using the Google Maps SDK.
When building with Android I had no problems and the map, locations and assets would be retrieved from the Google servers without an issue.
However when building for iOS the map would never display like so.
And after checking the network requests in the Safari there seemed to be no problems. With no errors logged after debugging and confirming that the map element is actually loaded I initially I thought this must be a style issue with the div map element but after some deliberation I found out in the Cordova documentation some extra information was needed in my config.xml file. specifically for iOS.
According to the docs , applications without any tags only have file requests from urls that are allowed.
<!--Access tothe subdomain maps.google.com-->
<!--Access toall the subdomains on google.com-->
<!--Enable requests tocontent:URLs-->
<!--Don'tblock any requests-->
Ionic Cordova Resources
When you are ready to build your application to production you will need to generate your image resources for your project.
We can do this using the command :
ionic cordova resources[<platform>]
A lot of the time my original splash image wasn’t at the correct resolution to be transformed into various other dimensions for mobile tablet etc. Ensure that you can correct this as the resources step is required for building to iOS or Android.
For more information check out the resources in the Ionic Docs.
Serving your Ionic application
Whenever you use the command:
Your application is wrapped in a display for each platform. This is also the case if you use Google’s developer tools mobile responsive view, your application will render the components relevant to Android or iOS and even Windows.
While this is undoubtedly useful to preview platform specific components do not assume that the behavior here is representative of what will actually happen on an emulator or a real device.
This may seem obvious; however, I was initially confused by this as the -labs display resembles an authentic emulator. For actual emulators you can use Xcode for iOS or Android SDK Tools for Android applications.
So these are just a few of obstacles I encountered throughout my development time with Ionic. If you are looking for some valuable tutorials and resources, feel free to check out my previous post regarding excellent learning tutorials for Ionic.
Similar to the Angular 4 release, this isn’t a core change to the platform, rather it is adding some improvements to your applications that will increase overall performance and allows hybrid app development to come a few steps close to being on par with its native development counterparts.
As always here is some useful Ionic reading material. And here is the official post from the Ionic team specifying all the changes.
Updating Ionic 3 from Ionic 2
Updating from Ionic 2 is actually quite a simple process. This video from Paul Halliday simplifies the process even further:
Ionic Angular 4
Ionic has been updated to be compatible with Angular 4 and all the features that come with it. You can find our Angular 4 release post here.
And the official Angular blog covers it here aswell.
Angular/Ionic 3 Lazy Loading
One of the most notable features of the release, lazy loading provides us with the ability to breakdown our bundles for our application even further.
This allows our application to only load certain bundles/modules when they are actually needed. When you lazy load, your application performance improves, particular as the app is starting up because all the modules that were previously loaded in our app.module.ts are not requested at once rather they are loaded on a page by page basis.
I would highly recommend checking out Paul Hallidays tutorial on this:
TypeScript 2.1 and 2.2 compatibility
As specified on the official Ionic blog. Ionic 3 has been updated to be compatibly with Typescript versions 2.1 and 2.2. This is inline with **Angular 4 ** being compatible with these versions as well. More information can be found here.
Ionic 3 a Promising future
So that just about summarizes the main changse for Ionic 3. I don’t think anyone can deny the momentum and progression that this framework has going for it.
While originally I was concentrating on all things Angular. Ionic has really provided such a sleek way to use web technologies in order to reach such a wider userbase and to target them more personally through mobile applications.
If you needed even more detail regarding Ionic 3 changes please check our Joshua Morony’s detailed guide here:
I highly recommend all his content as it provides a huge insight into all potential features you might want to implement into your application.