Web to Mobile with React Native: Part III

Continued from an earlier blog post: ‘From Web to Mobile with React Native: Part II’

One of KOMODO’s clients, an Insuretech startup, needed a mobile application built quickly and cost-effectively using technologies that they could take in-house at some point in the future. They had some experience with React and were building their admin systems using it, so React Native was a good fit.

The client needed something to showcase their idea to investors quickly. There were several requirements for the application that meant building a native application would have taken too long – the integration of a third party accounts management service provided by Amazon, the requirement to use a mapping client extensively in the app, and several charts that would have had to be built in different ways on iOS and Android. There was also an extra feature of Intercom.io integration that, while not a critical feature for the MVP, the client felt was a nice-to-have. React Native with some plugins from the React ecosystem, along with some libraries provided by the services we wanted to use enabled us to build all of these features fast.

In addition to these features, we wanted to implement a design that worked across both iOS and Android without needing to be coded twice, once for each platform. Using React Native meant we could reuse more code in both applications. This was a big plus.

However, even though React and React Native appear very similar, there are some interactions that are quite different. Often a web developer will trip up and create something that doesn’t feel quite right. So, having a combination of both web and mobile teams at KOMODO meant these issues were picked up and resolved.

Results with React Native

We integrated the necessary services with ease, working from Sketch wireframes to building the final versions of application screens worked tremendously well, and we were happy with the way the app came together. There were other wins too – we used React Native’s internationalisation plugin to create a Chinese version of the application, and we use the mapping application’s SDK to cache static image assets of a user’s maps for a huge performance improvement.

Another slightly unexpected advantage of building with React Native was that the startup developers were able to take the core business logic code from the app we built and reuse it in the admin frontend and the server – it’s all reusable JavaScript code after all.

The rest of the application came together precisely as a web application would have done. We could test using the same automation tools we use on web projects, we could work with the client to produce an API definition using the Swagger so we could generate code to communicate with the application’s API servers easily, and we were able to deploy things automatically.

To actually build the application we leveraged Microsoft App centre. This is a service that pulls code directly from a private git repo and creates an iOS build for users in the deployment manifest, and an Android build for users registered with App centre. The app is built in the cloud can be downloaded over the air by testers and includes analytics and crash reporting to gather metrics and information to improve how it works. This has enabled ThingCo to do a private beta test with a group of 50 users that has generated lots of good feedback and useful reports.

App centre is an example of Microsoft’s recent adoption of the open-source mentality to build tools that work really well for developers without locking them into a particular service.

React Native has been in the news recently as some large organisations have blogged about how it hasn’t worked well for them. All in all the experience of using React Native has been mostly very positive, and we plan to carry on using it extensively in future mobile applications where it’s the most appropriate toolset. We feel that React Native is a good fit for the scale of applications we work at – for something much larger like the applications Airbnb and Udacity it doesn’t work as well because managing a huge codebase is hard, and React Native has very little to help with that. If your app is smaller than AirBnb’s, however, you’ll probably be ok!

Got a mobile app project in mind?

We’ve used React Native on several projects now and found it to be cost-effective, fun, and produces high-quality applications.

If you want to explore the possibility of creating a mobile app to expand your digital presence, get in touch. Our experienced team of mobile developers will be happy to help you make your project a reality.