Integrating Google Maps in React Native (Android)

React Native is a popular mobile application development framework that allows developers to create cross-platform apps using JavaScript and React. One of the most commonly used libraries for integrating maps in React Native apps is React Native Maps. In this article, I will guide you through the steps to set up React Native Maps in a new React Native project with Android.

Github repo of React Native Maps : https://github.com/react-native-maps/react-native-maps

Prerequisites:

• Node.js and npm installed
• React Native CLI installed
• Android Studio and Android SDK installed

Step 1: Create a new React Native project To create a new React Native project, open a terminal window and run the following command:

react-native init MyProject

Replace “MyProject” with the name of your project.

Step 2: Install React Native Maps To install React Native Maps, navigate to the root directory of your project in the terminal window and run the following command:

npm install react-native-maps --save

This command will link the library to your project and automatically update the necessary files.

Step 4: Get a Google Maps API key To use Google Maps in your React Native app, you need to get an API key from the Google Cloud Platform Console. Follow these steps to get an API key:

• Go to the Google Cloud Platform Console and create a new project.
• Enable the Google Maps SDK for Android in the APIs & Services dashboard.
• Create a new API key and copy it to the clipboard.

Step 5: Add the API key to your project To add the API key to your project, create a new file called “android/app/src/main/res/values/secrets.xml” and add the following code to the file:

<resources>
    <string name="google_maps_api_key">YOUR_API_KEY_HERE</string>
</resources>

Replace “YOUR_API_KEY_HERE” with the API key you obtained in step 4.

Step 6: Configure the Android manifest file Open the file “android/app/src/main/AndroidManifest.xml” and add the following code to the file, just before the closing </manifest> tag:

<meta-data
    android:name="com.google.android.geo.API_KEY"
    android:value="@string/google_maps_api_key"/>

Step 7: Test the map To test the map, open the file “App.js” in your project directory and replace the existing code with the following code:

import React from 'react';
import { StyleSheet, View } from 'react-native';
import MapView from 'react-native-maps';

export default function App() {
  return (
    <View style={styles.container}>
      <MapView
        style={styles.map}
        initialRegion={{
          latitude: 37.78825,
          longitude: -122.4324,
          latitudeDelta: 0.0922,
          longitudeDelta: 0.0421,
        }}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  map: {
    flex: 1,
  },
});

This code will render a simple map with a marker at the location of San Francisco.

Step 8: Run the app on an Android device or emulator To run the app on an Android device or emulator, navigate to the root directory of your project in the terminal window and run the following command:

react-native run-android

Now, you should now have a basic understanding of how to integrate maps into your React Native application with the help of React Native Maps library. You can now begin exploring the different features and functionality that this library has to offer to create powerful and interactive map-based applications.