Integrating Maps in React Native using react-native-maps

When you search for integrating maps in React Native, you will see react-native-maps package for that.

So, in this blog we will use this same package to integrate the Google maps in your React Native app for Android.

Integrating Google maps in React Native is quite easy with this react-native-maps package, so let’s get started.

Here is the official doc for installation and configuring the package, you can also follow this for installation and configuring, but don’t worry I’ll walk through all the required steps with pictures so that you can easily follow my steps that will hopefully help with the whole process of implementing a map into your App.

Install the maps package

npm install react-native-maps --save

Add the meta-data tag inside the application tag in your android/app/src/main/AndroidManifest.xml file that is required for the map to work.

<application>
   <meta-data
      android:name="com.google.android.geo.API_KEY"
      android:value="INSERT GOOGLE MAPS API KEY HERE"/>
</application>

Install the maps package

If you already created the project in google cloud console than go inside your project. And select Library inside APIs & Services

Now, click on Maps SDK for Android

Enable the maps SDK for Android by clicking on Enable button.

Now, generate API key for the map by clicking on Credentials in APIs & Services under Credentials tab. After clicking on the Credentials in APIs & Services, click on the CREATE CREDENTIALS and than click on API key.

Once you click on the API key, the pop up will opens, copy the API key from the pop up ,close the pop up and paste the API key in place of INSERT GOOGLE MAPS API KEY HERE in the AndroidManifest.xml file.

Now, it’s time to code for the map implementation

Import the MapView from react-native-maps

import MapView from 'react-native-maps';

Insert the MapView tag where you want the map to display. Here I displayed the map in the full screen.

 <View style={{flex: 1}}>
        <MapView
          style={{flex: 1}}
          initialRegion={{
            latitude: 37.78825,
            longitude: -122.4324,
            latitudeDelta: 0.0922,
            longitudeDelta: 0.0421,
          }}
        />
      </View>

Now, run the project and you will see the map on the screen.

react-native run-android