Chapter 2: Ola Begins
This is the second in a series of blog posts in which we outline our experience of building the Ola micro-app using React Native.
Read the first part of the blog here.
Now that we had decided on the tech stack and had setup the base project with the utils functions in place, it was time to get knee deep into Ola.
The first hurdle we faced was to tackle transitions between screens. We were using React Navigation for navigating between screens, but when it comes to Ola, the map had to be the centerpiece for the entire screen. We did not want the map to go away or re-render while transitioning between screens, while the other components i.e. the headers and footers around the map, also needed to animate to give an immersive experience to the user.
The first thing that we did to tackle this was we built a map component sticking to our base principle of components being pure. All parameters that influenced the map were stored in the state, be it the markers that should be shown in the map, or the polyline points that would be used to show the path between two points and even the region that the user needs to navigate to. Everything was stored in state and could be dynamically modified via various actions so that there was no dependency on the component and the view layer could be controlled externally.
As we wanted to use the same screen, and just transition the components, we wrote our own version of the stack navigator. This stored the navigation states in store and instead of the entire screen getting updated, components of that screen like Footer, Header and Map got updated based on the route.
Now that we had a custom navigator to separate the logic between multiple screens while keeping the base map static, we were ready to tackle the next hurdle!
When looking for a suitable mapping library for React Native, we chose the community driven react-native-maps library originally developed by AirBnB.. It seemed like a great option if you are using advanced map features such as callouts, markers and polygons. Also we needed those features in order to show content such as pickup markers and cab positions. It offered painless integration with Google Maps on both iOS and Android.
While developing with React Native maps was most times a joy, we did face a couple of subtle problems. The first arose when we launched an internal beta of the app. Suddenly, there was an influx of feedback about the maps being too sensitive. We also compared it to the Ola and Uber maps and quickly observed that when zooming in the maps, the maps in other apps did not scroll when zooming in to a certain position.
The Problem Statement: The maps seem to be extremely sensitive when choosing pickup and drop locations as upon zooming, the map scrolled as well and changed the selected pickup location.
On the Android native side, we kept count of the number of fingers on the map. If the number of fingers was more than 1, we disabled all gestures on the map and started capturing the touches ourselves. From that, we figured out the zoom level and then manually setup the zoom level on the map.
Voila! Everything was right with the world again.
The final part of this blog will be up sometime next week. If there’s anything specific you’d like included in it, do us know in the comments.