How to Integrate HUAWEI Site Kit in React Native
Introduction
Hello Everyone,
In this article, We will look at the React Native Site kit. First of all, I would like to talk about HUAWEI Site Kit and React Native mobile application.
Site Kit provides place search services including keyword search, nearby place search, place detail search, and place search suggestion, helping your app provide convenient place-related services to attract more users and improve user loyalty.
Use Cases
React Native Site Plugin provides the following core capabilities for you to quickly build apps with which your users can explore the world around them:
- Keyword Search: Returns a place list based on keywords entered by the user.
- Nearby Place Search: Searches for nearby places based on the current location of the user’s device.
- Place Detail Search: Searches for details about a place.
- Place Search Suggestion: Returns a list of suggested places.
- Autocomplete: Returns an autocomplete place and a list of suggested places based on the entered keyword.
After some information we are ready to development.
Preparing the Development Environment
First of all, we need to make some adjustments in AppGallery Connect so that we can integrate our kit into our application. After the registration process is completed on HUAWEI Developers, we can create a new React Native project, configure and integrate it with the Huawei Push kit.
$ npm i @hmscore/react-native-hms-siteAfter all settings are done, we are ready to development now.🥳
Services
- Place Search
- Nearby Place Search
- Place Details
- Place Search Suggestion
- Search Widget
- Autocomplete
Initialize service
NOTE: To Initialize RNHMSSite, you need to pass the API key.
Place Search
Overview
With this function, users can specify keywords, coordinate bounds, and other information to search for places such as tourist attractions, enterprises, and schools.
To perform Place search:
Response with related parameters:
Nearby Place Search
Overview
With this function, your app can return a list of places around the current location of a user. When the user selects a place, your app obtains the place ID and searches for details about the place.
To perform Nearby Place search:
Response with related parameters:
Place Detail Search
Overview
With this function, you can search for details about a place (such as the name, detailed address, and longitude-latitude coordinates of the place) based on the unique ID (siteId) of the place.
To perform Place Detail search:
Response with related parameters:
Place Search Suggestion
Overview
With this function, your app can display suggested places during user input.
To perform Place Search Suggestion:
Response with related parameters:
Search Widget
Overview
The widget is a search component of the built-in place search suggestion feature. When a user enters a keyword in the search box, the widget displays a list of suggested places to the user. If the user taps a place in the list, your app will receive a Site object and use it to obtain details about this place.
To perform Search Widget:
Response with related parameters:
Autocomplete
Overview
With this function, your app can return an autocomplete place and a list of suggested places.
To perform Autocomplete:
Response with related parameters:
Conclusion
In this article, we have learnt how to integrate Site kit in React Native and usage for main capabilities, such as Place Search, Nearby Place Search, Place Details, Search Suggestion, Search Widget and Autocomplete.
For more details, you can visit our developer page.
