Adding maps in react native(mobile)

Hi Guys, In this blog we will see step by step how to add maps in react native. Just to clarify I have validated this in android platform but should in iOS as well).

First lets understand steps we will need to add maps in reactive native

1. Created app with react native cli
2. Add react-native-maps library
3. Added MapView and handlers for getting co-ordinates
4. Created API Key in Google Cloud Console
5. updated Android manifest with API Key
6. Run you awesome application
7. Bonus (Debugging)

1. Create app with react native cli

First thing first, create app with cli tool and try to run as it is to make sure your don’t have tooling issues(like Android SDK or Emulator issues). This will make sure that you have basic minimum requirement for developing react native apps.

npx react-native init awesome-reactnative

2. Add react native-maps library

Easiest way to add map(or more specifically google map) is to use ready made react library. you can do so with following command.

npm install react-native-maps

This should add react-native-maps as dependency in your package.json.

3. Adding MapView and handlers for getting Co-ordinates

MapView is a react component available in react-native-maps library which would allow display and handle many events.

import { StatusBar } from 'expo-status-bar';
import React, {useState} from 'react';
import { StyleSheet, Text, View } from 'react-native';
import MapView from "react-native-maps";


export default function App() {
  const [region, setRegion] = useState({
    latitude: 52.5079145,
    longitude: -0.0899163,
    latitudeDelta: 0.01,
    longitudeDelta: 0.01,
  });
  return (
    <View style={styles.container}>
    <MapView
      style={styles.map}
      initialRegion={{
        latitude: 37.78825,
        longitude: -122.4324,
        latitudeDelta: 0.0922,
        longitudeDelta: 0.0421,
      }}
      //onRegionChangeComplete runs when the user stops dragging MapView
      onRegionChangeComplete={(region) => setRegion(region)}
    />
    {/*Display user's current region:*/}
    <Text style={styles.text}>Current latitude: {region.latitude}</Text>
    <Text style={styles.text}>Current longitude: {region.longitude}</Text>
  </View>
  );
}

const styles = StyleSheet.create({
  container: {
    ...StyleSheet.absoluteFillObject,
    flex: 1,
    justifyContent: "flex-end",
    alignItems: "center",
  },
  map: {
    ...StyleSheet.absoluteFillObject,
  },
  text:{
    // Any Style that your prefer
  }
});

With the above code you would be able to add full screen maps and its co-ordinates in your apps. Notice how we use used states to capture the co-ordinates and display in UI. You could also capture this co-ordinates and do some processing like suggesting nearby restaurant/banks/ATM etc.

4. Create API Key in Google Cloud Console

This is very important steps in working with maps using react-native-maps . Following given instruction(some layout may change in future as google is updating their UI, I will try to update it and keep it relevant as much as possible)

First lets create project google cloud console.(you can skip this if you already have this created)

5. Now lets add map API Key in android manifest file (androidmanifest.xml) located under directory “android/app/src/main” folder with name “AndroidManifest.xml”

<!-- You will only need to add this meta-data tag, but make sure it's a child of application -->
    <meta-data
      android:name="com.google.android.geo.API_KEY"
      android:value="API_KEY"/> <!-- Your key goes here. -->
  
    <!-- You will also only need to add this uses-library tag -->
    <uses-library android:name="org.apache.http.legacy" android:required="false"/>

6. Run you awesome application

To run our application, we can use following npm command to build and deploy your application. If you are already running you application from step one then you need to stop that app and restart the application deployment as we have made changes in package.json and androidmanifest.xml

npm run android

7. Bonus(Debugging)

• Make sure your device/emulator has internet connectivity 😉

• If you are seeing grey screen with only google logo at the bottom, try to follow steps 4 as close as possible, this may happen because your API creds are not authorized for Google maps.

• Or sometime generating new API credentials should also do the trick.

Note: API creds created in Step 4 is not restricted and can be used for other APIs as well, when deploying this on production please restrict API keys to only allow access Maps APIs.

There are lot more feature available in react-native-maps like adding marker/custom marker etc. explore those awesome feature on official library page : react-native-maps – npm (npmjs.com)

Thanks for reading…