I had already built a web app that does the job of finding a cycling path between two points on a map, but when I opened the web app on the mobile phone I realised that the user experience is terrible!

The map images were being over-compressed by the browser. And the UI was not terribly good either. I hence decided to try React Native and see just how easy it is to create a mobile app.

I expected a lot from React Native. For starts, I thought I would be able to re-use some of my web app components that I had built with React. I also assumed that I'd have access to the same ecosystem of libraries that React/JavaScript have access to. Both of my expectations were not entirely met.

React Native has a set of elementary components that -when built- turn into 100% native elements. This is great for both the performance and the look of the app but this also meant that very little re-use can be achieved between React and React Native.

Another realization was that React Native has its own ecosystem. I couldn't use a React or JS library without adapting it. Likewise I didn't have access to native libraries without writing an adapter. I found myself in a strange position.

Don't get me wrong. There is an ecosystem around React Native and many adapters and wrappers have been implemented for popular native or JS libraries. But this ecosystem is still much smaller than what I am used to work with.

I experienced my first challenge when I added the chart component to the app. I had a limited number of chart libraries to pick from and most of them had terrible performance. The one I ended up using was an Android library and it too did not have all I needed. I wanted a way for the user to highlight a chunk of data on the chart and get insights about it. I ended up implementing that UI element from zero.