🚗 Building a Car Pool App: Working With React Native

Working from the MVP definition and UI mockup in my previous story, I needed to build something to work on a mobile device. I don’t have much experience with working with native code on iOS or Android, but I have played with hybrid applications and I have worked with hosted web apps on mobile too.

In choosing the technology stack for this, I decided to rule out options based on experience and time to build, future potential, performance and user experience.

Hosted Web App

The leading web browsers are getting more powerful with each release. Chrome, for example, has had features added and worked on that push the capabilities and open up many more uses. WebGL and Dart are just two examples of how the Chrome team are redefining the browser and arguably making Chrome into a platform.

My favourite introduction is Web Push. This allows web services to push notifications through to the web browser. However, at just the draft spec stage, Safari mobile doesn’t implement this. This ruled out the hosted web app option for me, along with the need for constant background location data to be broadcasted.

Hybrid App

Building with technologies like Cordova, PhoneGap and Ionic have been the choices of many teams who need the mobile experience, have web development experience to leverage, but don’t have the skills within the team for native development.

When this type of development was first introduced, the speed in which people could develop apps without learning native code and languages was a big leap in progress and enabled many inexperienced developers to begin building for mobile.

Despite the improvements to the mobile browsers (Chrome unifying the desktop and mobile codebase), I still think that the native experience is unrivalled (although this is getting close).

Native App

Building apps with native code gives the potential to provide the gold standard of user experience without limits. The big downside to this is that it does require knowledge of how to develop for each of the mobile platforms — which all have their own idiosyncrasies — and maintaining a codebase for each.

In recent years, we’ve since the introduction of cross-compilation frameworks that allow developers to write code in one language and have it run on multiple platforms. The most popular right now is Facebook’s React Native. Which supports iOS, Android and Windows (upcoming).

Building The App

I believe that users shouldn’t have to live with a sub-par experience that is due to the limitations of a framework, so I decided to opt for building the app with native code. I’ve been following the progress and maturing of React Native, and I felt that it was capable of providing a great user experience for the Car Pool App.

React Native has a CLI tool that allows people to get started quickly with a “Hello World” style application. So I needed to figure out how to build in the main elements of my app, which were: the map embed, live user location and phone call & SMS hooks.

For the map embed, Airbnb have published a package for React Native that allows either Apple Maps or Google Maps to be deeply integrated in the application; with features such as moving the map or zooming programmatically and adding map markers — which is what I needed. For the live user location, there is a native function of the React Native framework that allows the request of a user’s location.

To allow my app to request making a phone call or send an SMS, there was a React Native package that allowed that basic functionality.

So, I managed to add those components into the application with some mock data to get started — it didn’t take long at all to get something that looked like my UI design.