How a Mobile Developer from Morocco Integrated HERE Maps into React Native

#BuiltWithHERE is a series highlighting how developers are using the HERE platform to solve location-related business problems. Each blog post highlights a company who has developed a solution that is timely, innovative, and uses HERE products and/or data.

Introduction

React has become one of the most popular front-end development frameworks in recent years. While it is widely known for web application development, React Native has empowered developers to create mobile applications for both Android and iOS platforms.

This #BuiltWithHERE focuses on a library that has successfully integrated HERE Maps into React Native. The author is Abderrahim Ajakka, who is from Morocco. You can find his open-source React Native library for HERE Maps over at this GitHub link.

The library is distributed under the MIT License:

First Impressions

The promising introduction of the react-native-here-explore library highlights its ability to connect the HERE Maps SDK with React Native. Built from the ground up using modern native languages like Kotlin and Swift, the library provides efficient solutions for React Native developers. It leaves a sense that the gap between the HERE SDK and React Native is steadily narrowing:

At a glance, the library supports a wide range of mapping capabilities, including:

Map Display: Interactive maps with customizable themes (e.g., NORMAL_NIGHT).
Routing: Route planning and navigation.
Geographic Overlays: Add markers, polygons, and polylines to enhance map interactivity.
Config Modules: Easily configure HERE services using the HEREConfig module.

To bring these features to life in your project, you (the developer) will need to follow the installation guide. Here are the most important points from the guide:

Sign up to the HERE Platform: Get access keys by providing billing info and registering a new app.
Download the HERE SDK Explore Edition: Obtain the SDKs from the official HERE web portal and download the required files.
Extract and move SDKs to your project:
- Android: Copy the .aar file to your-project/android/heresdk and edit the build.gradle file.
- iOS: Copy the .xcframework file to your-project/ios/Frameworks and create a podspec file.
Authenticate using credentials: Initialize the SDKs using the ACCESS_KEY_ID and ACCESS_KEY_SECRET in your index.ts file.
Install Cocoapods (iOS only): Run pod install in your terminal and add the library to the Podfile.
Verify setup: Ensure all steps are completed correctly to use the HERE SDKs effectively.

For detailed instructions, you can refer to the complete installation guide here.

WHO, WHAT and HOW? The Interview

To better understand the reasoning behind building this library I have asked a few questions to this passionate mobile developer from Morocco who has brought this library to life.

Alberts Jekabsons (AJ): Abderrahim who are you, tell something about yourself?

Abderrahim (AA): I got into Development back when I was in middle school where I finished a Java course and decided to start Android development with my newly learned Java and Eclipse skills. Then I started to really dive into Mobile development as years went by, up until now that I got a Master's degree in CS and worked Professionally as an Android developer first, then transferred to React Native.

AJ: t is interesting how the journeys in the programming world begin, many of those start in Middle school. I started with Pascal whereas you took the more serious JAVA route. For me it is evident that you are no stranger to challenges . Tell us, where did the inspiration come from to build this library?

AA: I was inspired to make this library simply because I haven't had a challenging problem for a while, which led me to want to learn how React Native works inside and how it communicates with the Native Android/iOS side. I wanted to also build something that would benefit the community as a whole and make an impact on real people, that was when I remembered that I was working on a project and the client wanted to use HERE Technologies in the app we were building for them but there wasn't official support for React Native, so we initially used ... [another provider].

It then occurred to be the perfect chance to work both on a challenging problem of learning more about React Native and also fill a gap by building a real project that will benefit the community as a whole, so I started building until I eventually reached a stage where I was confident of my work, then released it.

AJ: It looks like you had a chance to not only solve a challenging technical problem but also contribute to the developer community*. You have satisfied the initial requirement to use HERE. How do you feel about it?

AA: I noticed that It was the right call to choose HERE for my project because after I released it, I started to get messages, pull requests and issues from other developers who build products using my library and constantly provide feedback, improvements or just a thank you, Like in this post I shared on LinkedIn:

AJ: Development is an iterative process. What are the next steps with the library or future projects involving HERE?

AA: My next steps with the library will be to reach feature parity with the Native SDK, and to support both the new React Native Architecture and Expo Framework. I would also like to work on support for testing, and a more robust documentation using Docusaurus.

Contribution

I am certain it will be the right call to choose HERE for your projects too! In case you want to contribute to the react-native-here-explore library, this article should give you the encouragement to do so. Follow Abderrahim’s tips under the CONTRIBUTIONS section in GitHub.

Happy coding!

* NB! Always take the time to learn & give back!