Every good idea needs a conduit

Biclomap is intended to be the “Biker Enthusiasts Free Application Suite”. This means that we need e medium to put it into bike riding people’s hands, or on the handlebars, if we want to get specific. The obvious way to go was by making a mobile application for it. This can be much easier said than done.

Develop for everything

The problem for every app these days is to have the app available on all platforms. Luckily we decided that it is enough to target only Android and iOS, considering that these 2 platforms will likely cover the majority of the target demographic.

To make the best use of the native functionalities of the mobile devices, we need a solution to have native apps. The best way to do this for a platform is to develop a purely native app. This will mean we will need to maintain 2 different applications in 2 different technologies in parallel. Therefore the obvious approach was to go with the solution in which we need to maintain only 1 codebase and be able to deploy to multiple platforms.

Decisions decisions

One solution is to have a containerized PWA like Ionic or Cordova. This solution would have the benefit of finding developers with the skill sets to help out. The downside is that it comes with some overhead that we would have liked to avoid.

A second option is to go with a framework like Flutter, React Native, or Xamarin that generates native code for deployment. But there is a caveat. While the generated is indeed native code, it is not on par having pure native applications.

We ended up settling on React Native for multiple reasons.

  • Growing popularity
  • Most similar to web technologies
  • Variety of components/modules available
  • Expo can handle most of the heavy lifting for us

React Native

React Native is a cross-platform framework, that lets you create truly native apps and doesn’t compromise your users’ experiences. It provides a core set of platform-agnostic native components like View, Text, and Image that map directly to the platform’s native UI building blocks. This approach has the benefit that there is barely any learning curve for web developers.

The code is very similar to web React code. The differences mainly boil down to the navigation, the styling, and the basic UI components (mentioned above).

While for React web you get used to working with the route (the URL), in React Native you combine navigation stacks into the desired hierarchy. You can read more about it here.

Styling

At first look, you might get fooled that the styling is done through plain old CSS. But it is not, it only is very similar to the CSS we all got used to by now. You can read more about the styles here. While 80%-90% of the available properties recognized by the native UI components are the same as we expect with CSS, there are some differences. For example, here is a list of props that style for a View can accept.

Luckily we can still use Styled Components with React Native. This module as for React web can help us to keep our stylings isolated while still being able to reuse styles to avoid duplicated code.

Expo

Expo handles the gritty parts of building for each app store so you don’t need Xcode or Android Studio to get your app up and running.

But maybe the most useful is during development. You quickly build and run the app on a simulator or even on your phone directly.

The command expo start spins up the expo dashboard on your default browser. From there you attach to a running simulator on your device or scan the QR code with their dedicated app. To run it on your phone you just need to be on the same network as the device you are running the expo dashboard on, and have their dedicated app installed on your phone.

Expo makes your job a whole lot easier during development because it allows the app to be fast refreshed after any changes being done in the code. It will detect any file changes and re-deploy the changes to the attached device, even without reloading the whole app if possible.