These days, adding maps to mobile apps is a requirement because of features like tracking, navigation, or showing users’ locations. Our React Native app development services are designed to help you build location-aware applications efficiently. In this post, I will show you how to setup the react-native-maps in a react native project. I will walk you through the necessary setup, configurations, and permissions, and display a map view. As you complete this guide, you will be ready for whatever app you wish to build, whether it’s just a simple map screen. So let’s get started!

Prerequisites

Check to see if you have all the React Native tools set up on your system. If your machine is not set up yet, you can complete the official React Native setup guide here – React native.

What You’ll Learn in This Blog Post

In this guide, we’ll walk through the key aspects of working with maps in a React Native CLI project, including:

• Introduction to react-native-maps

• Installation and setup

• Requesting and handling location permissions

• Creating a sample screen with a map view

• Displaying the user’s current location on the map

• Drawing a polyline between two coordinates

• Using Google Maps Direction API for advanced features

Introduction to React Native Maps with react-native-maps Library

React-native-maps is a popular library to integrate maps in Android and iOS applications developed using React Native. It has core components like MapView and Marker. These help you show maps, give pins, and handle user interactions such as taps and gestures. It uses native map services. It also works with Google Maps React Native. On iOS, it works with Apple Maps and Google Maps. This provides you with native performance and a seamless experience.

A variety of customization is in store for you, including types of maps, zoom controls, overlays, and markers. From creating simple maps to inserting sophisticated functions like tracking and navigation, this library is an ideal choice.

You can also explore react native map style customization and react native maps custom style options to improve your app’s visual experience.

Installation and Setup for react-native-maps and Google Maps in React Native

To get started, install the following packages

• npm install react-native-maps

• npm install react-native-geolocation-service

• npm install react-native-permissions

Here’s what each package does:

• react-native-maps is used to show and control the map view.

• react-native-geolocation-service offers the device location with greater accuracy.

• react-native-permissions is used to request and check location permissions for Android and iOS.

For advanced implementations, you can also consider features like react native maps clustering or support for offline maps using react-native-maps.

If you’d like to take it a step further, here’s how to embed native screens in React Native for seamless cross-platform experiences.

Setup React Native Maps for iOS Only 

• Step 1

Add the following dependency to your Podfile located in the ios directory:

pod 'react-native-maps', :path => '../node_modules/react-native-maps', :subspecs => ['Google']

Code language: JavaScript (javascript)

• Step 2

Update your Podfile with the following script to handle permission setup properly:

def node_require(script)

  # Resolve script with node to allow for hoisting

  require Pod::Executable.execute_command('node', ['-p',

    "require.resolve(

      '#{script}',

      {paths: [process.argv[1]]},

    )", __dir__]).strip

end

node_require('react-native/scripts/react_native_pods.rb')

node_require('react-native-permissions/scripts/setup.rb')

setup_permissions([

  'LocationAccuracy',

  'LocationAlways',

  'LocationWhenInUse',

])

Code language: PHP (php)

• Step 3

Run the pod install command to install the pods

Setup React Native Maps For Android 

• Step 1

Add the following dependency to your **android/app/build.gradle** file inside the dependencies block:

implementation (“com.google.android.gms:play-services-location:21.1.0”)

• Step 2

Add the following configuration to your **android/build.gradle** file outside the buildscript block (at the root level):

 allprojects {

   configurations.all {

       resolutionStrategy {

           force 'com.google.android.gms:play-services-location:21.1.0'

       }

   }

}

Code language: JavaScript (javascript)

This makes certain that the same play-services-location version is used consistently in every library, thereby avoiding runtime crashes caused by version mismatch.

Requesting and Handling Location Permissions in React Native Maps Apps

To request or check location permissions, you need to add the appropriate permission 

Descriptions in your iOS Info.plist file and Android’s AndroidManifest.xml file.

Read More:

https://mobisoftinfotech.com/resources/blog/app-development/react-native-maps-interactive-google-maps-tutorial