What can you do with React Native Maps?

React Native Maps

What can you do with React Native Maps?

Let us look at what all things can you do with React Native Maps. React Native is a popular choice when it comes to app development.

Installation

npm i react-native-maps

Setup (android)

<application>

   <!– 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=

“YOUR_API_KEY”/> <!—Your API 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”/>

</application>

Showing map

<MapView

        style={styles.map}

        //specify our coordinates.

        initialRegion={{

          latitude: 37.78825,

          longitude: -122.4324,

          latitudeDelta: 0.0922,

          longitudeDelta: 0.0421,

        }}

      />

This will show the location which we specify in lat and long

Displaying maps with state

const [region, setRegion] = useState({

  latitude:

51.5079145,

  longitude:

-0.0899163,

  latitudeDelta: 0.01,

  longitudeDelta: 0.01,

});

<MapView

        style={styles.map}

        //specify our coordinates.

region={region  } 

   />

Changing the map type 

It can be done with the prop mapType which have the following inputs:

The map type to be displayed.

– standard: standard road map (default)
– none: no map Note Not available on MapKit
– satellite: satellite view
– hybrid: satellite view with roads and points of interest overlayed
– terrain: topographic view
– mutedStandard: more subtle, makes markers/lines pop more (iOS 11.0+ only)

Adding a marker in maps

import { Marker } from

“react-native-maps”;

const [region, setRegion] = useState({

  latitude: 51.5079145,

  longitude: -0.0899163,

  latitudeDelta: 0.01,

  longitudeDelta: 0.01,

});

<MapView

      style={styles.map}

      region={ region } //your region data goes here.

    >

      {/*Make sure the Marker component is a child of MapView. Otherwise it won’t render*/}

      <Marker coordinate={ region } />

    </MapView>

Changing the color

<Marker

  coordinate={ region }

  pinColor=”green”

/>

Changing the marker image

<Marker

  coordinate={{ latitude: 52.5200066, longitude: 13.404954 }}

  image={require(“./”)} //uses relative file path. 

/>

Using <polyline /> in React Native Maps

import { Polyline } from “react-native-maps”;

const region1 = {

  latitude: 35.6762,

  longitude: 139.6503,

  latitudeDelta: 0.01,

  longitudeDelta: 0.01,

};

const region2 = {

  latitude: 35.6074,

  longitude: 140.1065,

  latitudeDelta: 0.01,

  longitudeDelta: 0.01,

};

<MapView style={styles.map} initialRegion={ region1 }>

      <Polyline

        coordinates={[ region1, region2]} //specify our coordinates

        strokeColor={“#000”}

        strokeWidth={3}

        lineDashPattern={[1]}

      />

    </MapView>

These are some of the things that React Native Maps can do. If you are looking for any kind of app development services, please feel free to reach out to us today!

1 Comment
  • Rucha Kapil Jaeel
    Posted at 10:18h, 03 October

    Very useful