Development in React Native Platform with HMS Location kit, Map kit, Site Kit-1

Hello in this article, we will develop HMS Location kit, Map Kit, Site Kit and React Native application with you, firstly let’s start with our “react-native init” command 😄 then let’s start to our project and perform our library additions with npm or yarn according to the information on this site;

Location Kit:

@hmscore/react-native-hms-location

Map Kit:

@hmscore/react-native-hms-map

Site Kit:

@hmscore/react-native-hms-site

Now that we have finished our installation on the Npm site, there are some values we need to add from the AppGallery Console for Kits, so you can click this link and access the necessary information:

Document

What You Need To Do

1. You need to create SHA-256 key and add this key in AGC console.
2. Then you need to add the HMS Core dependency to your project.
3. We need to download the .json file created in the AGC console and put it in the app directory.
4. Since you have installed the library with Npm or Yarn, you only need to add packages in the MainApplication.java section (Footnote: If the React-Native version of your project is higher than 0.60, you do not need to do this 🥳).

Example of adding packages in React native:

So A Question in Mind?

Let’s say you have a react native project that works with Google services, but you want to use it with Huawei services, you do not want to create a separate .apk file, in such a case, we will perform as follows:

Let’s add this java file to the folder where our java files are located. Later, we will access this method via NativeModules. Thus, we will be able to use GMS and HMS services together.

First, let me show you how to get our Location information with the Location Kit:

If your React-Native version is below 0.60, we need to add packages to our MainActivty.java file with packages.add (new RNHMSLocationPackage ()) and we need to provide the appropriate imports:

import com.huawei.hms.rn.location.RNHMSLocationPackage

import com.huawei.hms.rn.location.helpers.HMSBroadcastReceiver

Let’s not forget to get our permission from the manifest section:

<uses-permission android:name=”android.permission.ACCESS_COARSE_LOCATION”/>
<uses-permission android:name=”android.permission.ACCESS_FINE_LOCATION”/>

⚠️ If you are going to take a permanent location, you need this permission:

<uses-permission android:name=”android.permission.ACCESS_BACKGROUND_LOCATION”>

Now that we have made the necessary permissions and configurations, we can start to get location first.A map without our location information is unimportant after all 😄

How Will I Obtain Location Information Using HMS Location Kit?

First of all, we need to get the necessary permissions for the location from the user and we need to obtain the location information with it:

First of all, let me explain our code, I got the location information with react hooks, so we created our stats in the const function. Is there any permission to apply for the location afterwards? If not, we will use hasPermission () to check this, we will save the return value in our state. Then, if our value is false, we call the requestPermission () method for location information. If not, we call the getLastLocation () method, which is the most used instant location information, and access the relevant location information:

The location values returned from the method can be obtained from here.

After obtaining the location, it’s time to integrate our Map:

I used if state because you don’t render the Map before you get the position you need to pay attention to. Apart from that, you can improve the map using React Native documents on Huawei Developers Page 👌

So What Will We Do When Using Multiple Markers? 🧐

Let’s say you have more than one location information and you need to show these locations with Markers. For this, you need to use map in view tags.
You can use maps in Component class by using these.states 🥳 but what will you do in Const Classes?You know that there is no this.state in Const Classes 😅 First of all, I created a code like this:

This was a slightly longer code file, now we have integrated the Site Kit Site Kit I told Huawei to take the bus stops near the location to be an exemplary use of this service, a service that includes location information of places and more. In the first place, you need to set your api key as const, then we should check whether our location information has come, since we will call the information of the locations according to the location, then we determine our criteria by giving the necessary parameters. To explain the criteria, you can change the types of places from PoiType.

Document

Let me show you what information is coming from a bus stop as an example:

Page Index, if you want to get the first information returned by the service, you need to type 1, but if you want to get the third from the first in the returned values, you need to type 3, and in Page Size, you decide how many places you will get, I want to see 4 places around the location. I have to say 4. We can say that country codes are important for displaying the names of locations properly. Then, we set our parameters to a value, use that value as a parameter and call the service, and transfer the returned results to our State. Since there is a const function afterwards, we must somehow get this data from our state with map. Object.keys comes into play here, too, so we have set more than one Marker.

So, how do we filter the places that come with the Site Kit using Search Bar / Search Bar? 🧐

First, we need to install searchbar plugin, vector-icons plugin and ListItem plugin for Searchbar from React Native Elements. For this, you should follow these links 👇

SearchBar:

SearchBar | React Native Elements

VectorIcons:

Icon | React Native Elements

ListItem:

ListItem | React Native Elements

After completing the installation and import processes, we will need to do this in our example code:

Now, firstly, let’s define the React Native Elements plug-ins we have installed in the render area, then let’s create a state for the entered Search value, thanks to this state, we will be updated instantly, so our location information will be updated instantly, so I create a method under the name updateSearch. I’m sending the search value. With this search value, we take the location according to the information returned from the Huawei Site Kit’s suggestion system and focus the map layout on this place. Later, we need to assign an array to ListItem, and after we have assigned it, we need to update our existing place list.After updating this place list, we focus our map on the first place in the suggestion list with setCameraPosition.

⚠️ Since you have created the mapView variable as a reference, we can interfere with the map from anywhere in the code.

ref={(e) => (mapView = e)}

So How Do We Customize The Marker? 🧐

Let’s start by changing the icon of Marker first:

You need to open an assets folder in the directory you see on the side, then you need to add your icon files to this folder. After adding it, a file will be added to the android apk by saying yarn android again, and then you will be able to set your icon with the icon parameter into the marker tag.

So how do we add InfoWindow to Marker? If you want to add a very simple title, the title parameter will be enough for you, but if you want a more comprehensive InfoWindow, you will be able to create your InfoWindow as you wish by opening the InfoWindow view tag and getting support from the style as in the example code.

So how do we get the markers to be collected when we press the Clustrable away on the map? First, to the MapView view tag:

markerClustering={true}

You need to add “clusterable” to the end of the marker tag.

⚠️ Our Marker Icons cannot be changed with style yet.

So what have we created at the end of this post? 💻

In this article, we developed a basic map application on the React Native platform using Huawei’s 3 kits. Sometimes it is possible to delay or be confused in services, so if you get any errors, I recommend you to examine the logs. You can contact me in case of any question. In the future, there will be the second series of my article, if there is any part you are curious about, please tell me that I will mention this in the 2nd series :) Let me share the screenshots and video about the map application we have created:

Documents:

HMS React Native Kits:

Document

React Native Elements:

React Native Elements | React Native Elements

Project Repo:

can-sevin/HmsMapExtreme