Android, iOS, React Native, Redux

Using React Native to build a Pedometer on iOS & Android

I had to recently build a mobile health app for a client as a demo. One of the features of the app was to count steps  and display historical step data.

iOS or Android?

Two parallel universes with their own ways of doing things. So it would be one or the other. I have no experience of Obj-C or Swift, but i do Java.

What about hybrid apps?

Ionic vs NativeScript vs React Native. I chose React Native and i don’t regret it!

With React Native i could write React and use features such as Redux and npm.  After a lot of hard work, within 3 weeks i was able to build a pedometer application for both iOS and Android! As i was wrapping up, Facebook released the source code for the new f8app. I wish i had the code before i wrote my app, i would have done things differently. It’s a great reference point.

What l learnt?

  • RN will rock the world. It will get there, i can see it maturing in the next year or so.
  • Navigation is harder than it should be. I didn’t want to spend too much time pondering as to what the best practices should be. So i used react-native-flux-router, but this meant that the Android App looked like the iOS app (I wanted tabs for iOS and a drawer menu for Android).  The f8app provides a great example of implementing Navigation, which in my opinion is too verbose and complex. Given that iOS and Android apps in general have patterns for typical navigation, it could be much simpler. Not to mention that there is also NavigatorExperimental that will eventually usurp the Navigator.
  • RN documentation was somewhat lacking in terms of visuals. I see there is a SegmentedControlIOS,  but i would like to be able to visualize it. Luckily the documentation has been improved since.
  • I had to bridge the apis for HealthKit on iOs and Google Fit on Android. I decided to use Swift for the iOS bridge because i wasn’t in the mood to learn all the nuances of Objective C. I actually found writing the iOS bridges much cleaner and easier than writing Java (i have done lots of Java development) for Android. Go figure!
  • Having the ability to use Redux made state management easy.

The source code for the appropriately named AwesimSteps can be found here.

The feature image used by this post is attributed to the Creative Commons Attribution 2.0 Generic License.

 

 

 

 

 

Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn
  • http://www.theuglyfattruth.com/ Jim Reynolds

    NICELY Done!!!!
    If you don’t mind, I will be using alot of your code and implementing it using Redux-Observable. I’ll let you know how it turns out