React native maps: Using this module to add maps in React Native

In recent years, almost every mobile application certainly has a map feature for tracking the user. To clarify, having accurate information about your users’ location is a great way to enhance the user experience. For example, you could use this data to show users what is around them, offer exclusive deals for products and services in their area, and much more. Fortunately, if you have a React application, implementing maps is a breeze when using the react native maps library.

React Native maps for integration
React Native maps for integration

React native maps is a component system for maps that ships with platform-native code that needs to be compiled together with React Native. However, there are several tutorials on how to set up this library, and none of them seems to be appropriate. So in this article, we – ArrowHiTech would like to introduce to you guys the steps on how to using this module for adding maps in React Native. Let’s get started!

Step 1: Install and set up React Native application

If you want to integrate React native maps for your existing app, skip Step 1. However, if not, then you should definitely start here. If you haven’t installed the React Native command line interface, then run: npm install -g react-native-cli. So now you can create your project, simply using: react-native init ReactNativeMaps

Here are the dependency versions at the time of building this project:

  • “react”: “16.6.1”
  • “react-native”: “0.57.5”
  • “react-native-maps”: “0.22.1” – we will install this one later.

Now you can try to run your app, react-native run-ios, or react-native run-android. Usually, this works without any problems.

Next, let’s install the React native maps: npm install –save react-native-maps after installing the package you should link it to your native apps: react-native link react-native-maps.

Step 3: Set up React native maps (example – Apple Maps for iOS)

It will be easier if we set them up separately by platform, so let’s first do it on iOS. Before integrating Google Maps, we will check if Apple Maps works correctly. You can test whatever location you want, just specify the appropriate Latitude and Longitude. We enabled user location simply by adding the showUserLocation prop to the MapView component. If you are running on the real device you will see your current location.

Apple Maps example

Step 4: Install Google Maps package

We have to install Google Maps SDK for iOS. So we will use the Cocoapods. If you haven’t used it before, run sudo gem install cocoapods for your React native maps.

Now you have to create a Podfile where you will specify the dependencies of your iOS application. Navigate to your iOS/ folder in your React Native app and run: pod init or you can use touch Podfile you should have something similar to this:

 # platform :ios, '9.0'
target 'ReactNativeMaps' do
# Pods for ReactNativeMaps
pod 'GoogleMaps'
end

As you can see, we added the pod GoogleMaps and now we have to install it. If you are still on iOS/ folder, run pod install. We should open xCode workspace to do that instead. Then, navigate to the AirGoogleMaps folder from node_modules/ and drag it to the top of your xCode project. If you are failing, you should add HAVE_GOOGLE_MAPS=1 Preprocessor Macro to Build Settings for your maps.

Step 5: Get Google Maps API key, Run iOS app with Google Maps

So now we have to generate a Google Maps API key. Copy your API key and add to AppDelegate.m file for your React native maps.

 #import <GoogleMaps/GoogleMaps.h>
[GMSServices provideAPIKey:@"YOUR_API_KEY"]

Now you can tell your MapView component that you are ready to use Google Maps.

Bonus: Android integration

Now, we can quit xCode, and let’s just try react-native run-android. The result still the same, except you need to replace the code like this:

 implementation(project(':react-native-maps'))
{
        exclude group: 'com.google.android.gms', module: 'play-services-base'
        exclude group: 'com.google.android.gms', module: 'play-services-maps'    
}
implementation 'com.google.android.gms:play-services-base:12.0.0'implementation 'com.google.android.gms:play-services-maps:12.0.0'

Add API_KEY to the AndroidManifest.xml file, and we are set. The maps will run on both platforms.

>>> Related

React Context API: Introduction and practical guide

Final words

That may conclude the steps on how to use the React native maps to add maps to this module. As a result, you should now have a basic understanding of how to implement maps, their benefits, and how to build features on top of the library. Also, you can implement these lessons into your work to build myriad types of applications, from taxi services to restaurant finders, to delivery apps, and much more.

We – ArrowHiTech is proud to be one of the most well-established outsourcing companies all around the world. That is to say, with over 12 years of experience, we can provide the best React native app development services for your eCommerce business.

ArrowHiTech services

If you have any questions, don’t hesitate to contact us via email support@arrowhitech.com or our phone number +84 243 7955 813. We would love to hear every feedback from you guys.

Tags

Share