Starting out with mobile development, I went ahead and implement the functionality that is very similar to the web version of the application.
Little did I know that things that are automatically handled for me in the web must be handled manually in mobile.
With react-native, we also need to pay attention to the subtle differences between iOS app and Android app which may not be immediately visible.
I wish somebody had told me about the following things before building a mobile application.
1. Detecting if application is online
When it comes to server backed application, it’s very important to detect if the mobile application has access to the internet.
The last thing you would want is for the application to try sending data to the server but failing due to no-connectivity.
When not handled properly, this can easily crash your app.
Lucky for us, react-native has a built in mechanism to detect the device’s state of the network.
Through the use of NetInfo, we can easily detect the state of network.
2. Upgrade notice
While we can easily push new javascript files (hash or with some sort of cache busting mechanism) in the web, in react-native we can’t simply push the update of new updates.
Especially if your app relies on different version of server API, it’s a very good idea to build an upgrade notifier in your application.
For javascript files update, you can tap into the power of CodePush.
Depending on your application behaviour however, you may want to notify user before downloading the updates to your application.
3. Navigation in Android vs iOS (drawer vs tabs)
At the time of writing, Android phone users are used to a different navigation option as opposed to iOS phone users.
In Android phone, people are very used to having a drawer that contains all the main menu for the application.
Additionally, Android users are used to having a back button at the bottom of their phone to go back a scene or even quit the application.
On the other hand, iOS users are so accustomed to using tab bars to go through different scenes in the application.
Drawers are a little out of the element for iOS users.
IOS users are also not accustomed to having back button at the bottom of their phone but a back arrow as part of the navigational bar.
4. Welcome screen
As opposed to web applications where we can use tours (such as tourbus or react-joyride), mobile application users are more accustomed to having slides as part of the welcome screens.
Mobile applications should be kept really simple so users can instinctively understand what they need to do to utilise the functionalities in the application itself.
5. Auto re-login (remember me)
In most mobile app that requires login, it is a common practice to stay logged-in after the first time login attempt.
As opposed to web application where user needs to check or uncheck the remember me button, in mobile app its almost expected to be automatic.
For server backed application, this can be easily achieved with token based authentication. For example, with OAuth by refreshing user’s access token whenever they are re-opening the app.
Those are 5 things that I did not think about until I was about to release my first mobile application.
How about you? Let me know in the comments, I would love to know your experiences.