Working with Maps (react-native-maps)

1. Installing Map Dependencies

Install the required map library and its dependencies using npm or yarn.

Example: Install react-native-maps

npm install react-native-maps

Dependency	Description	Version
react-native-maps	Library for displaying maps in React Native apps	`1.14.0`
react-native	Core React Native framework	`0.73.0`

Note: On iOS, you may need to run cd ios && pod install after installing the package.

2. Creating MapView Component

Example: Basic MapView Component

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

const MyMapView = () => {
  return (
    <MapView
      style={{ flex: 1 }}
      initialRegion={{
        latitude: 37.78825,
        longitude: -122.4324,
        latitudeDelta: 0.0922,
        longitudeDelta: 0.0421,
      }}
    />
  );
};

export default MyMapView;

Property	Type	Description
initialRegion	`Object`	Initial region to display on the map. Requires latitude, longitude, latitudeDelta, and longitudeDelta.
style	`Object`	Styles to apply to the map view. Must include flex or height/width.
mapType	`String`	Map type to display. Options: "standard", "satellite", "hybrid", "terrain".
showsUserLocation	`Boolean`	Whether to show the user's location on the map.
showsMyLocationButton	`Boolean`	Whether to show a button to center the map on the user's location.

Note: The initialRegion property is required to display the map. It defines the initial center and zoom level of the map.

3. Setting Initial Region

Property	Values	Description
initialRegion	`{ latitude: number, longitude: number, latitudeDelta: number, longitudeDelta: number }`	Defines the initial region to display on the map

Example: Setting Initial Region

import MapView from 'react-native-maps';

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

Note: The latitudeDelta and longitudeDelta control the zoom level of the map. Smaller values mean a more zoomed-in view.

4. Adding Markers

Property	Description	Default	Notes
coordinate	Latitude and longitude of the marker	`null`	Required field
title	Marker title (shown on tap)	`null`	Optional
description	Marker description (shown on tap)	`null`	Optional
pinColor	Color of the pin (red, blue, green, etc.)	`#ff0000`	Hex color or predefined color name
image	Custom image for the marker (URI or local resource)	`null`	Overrides pinColor if set

Example: Basic Marker

import { Marker } from "react-native-maps";

<MapView style={styles.map}>
  <Marker
    coordinate={{ latitude: 37.78825, longitude: -122.4324 }}
    title="Golden Gate Bridge"
    description="San Francisco, CA"
  />
</MapView>

Example: Custom Pin Color

import { Marker } from "react-native-maps";

<MapView style={styles.map}>
  <Marker
    coordinate={{ latitude: 37.78825, longitude: -122.4324 }}
    pinColor="#00ff00"
  />
</MapView>

Example: Custom Image Marker

import { Marker } from "react-native-maps";

<MapView style={styles.map}>
  <Marker
    coordinate={{ latitude: 37.78825, longitude: -122.4324 }}
    image={require("./custom-marker.png")}
  />
</MapView>

5. Creating Custom Markers

Property	Description	Example
image	Path or URI to the custom marker image	`require('./assets/marker.png')`
callout	Content to display when marker is tapped	`<View><Text>Custom Info</Text></View>`
pinColor	Color of default pin (ignored if image is set)	`'red'`

Example: Custom Marker with Callout

import { Marker } from 'react-native-maps';

<Marker
  coordinate={{ latitude: 37.78825, longitude: -122.4324 }}
  image={require('./assets/custom-marker.png')}
  callout={
    <View style={{ padding: 10 }}>
      <Text>This is a custom marker</Text>
    </View>
  }
/>

Note: Custom marker images must be properly sized and optimized for mobile devices to ensure good performance.

6. Drawing Polylines

Polylines are used to draw connected lines on a map, often used for routes or paths.

Property	Description	Values	Notes
coordinates	List of latitude/longitude points	`[{latitude: number, longitude: number}]`	Required. Points must be in order to form the path.
strokeWidth	Line thickness in pixels	`number`	Default is 1.0
strokeColor	Line color in hex or rgba	`string`	Default is `#000000`
geodesic	Whether to draw a geodesic line	`true` or `false`	Default is `false`. Geodesic lines follow the curvature of the Earth.

Example: Drawing a Polyline

import MapView from "react-native-maps";

const RouteMap = () => {
  const coordinates = [
    { latitude: 37.78825, longitude: -122.4324 },
    { latitude: 37.7885, longitude: -122.4326 },
    { latitude: 37.78875, longitude: -122.4328 },
  ];

  return (
    <MapView style={{ flex: 1 }}>
      <MapView.Polyline
        coordinates={coordinates}
        strokeWidth={4}
        strokeColor="#FF0000"
      />
    </MapView>
  );
};

7. Drawing Polygons

Drawing polygons with react-native-maps involves defining a set of coordinates that form the polygon's boundary. The Polygon component is used to render these shapes on the map.

Example: Basic Polygon

import { MapView } from "react-native-maps";

const polygonCoordinates = [
  { latitude: 37.7849, longitude: -122.409 },
  { latitude: 37.7849, longitude: -122.408 },
  { latitude: 37.7859, longitude: -122.408 },
  { latitude: 37.7859, longitude: -122.409 },
];

<MapView style={{ flex: 1 }}>
  <Polygon
    coordinates={polygonCoordinates}
    strokeColor="#F00"
    strokeWidth={2}
    fillColor="rgba(255, 0, 0, 0.3)"
  />
</MapView>

Property	Description	Default	Type
coordinates	Array of latitude/longitude objects defining the polygon boundary	`[]`	Array of `{ latitude: number, longitude: number }`
strokeColor	Color of the polygon's border	`#000`	String (Hex or Named Color)
strokeWidth	Width of the polygon's border in pixels	`1`	Number
fillColor	Fill color of the polygon (supports transparency)	`rgba(0, 0, 0, 0.5)`	String (Hex or Named Color with Alpha)
tappable	Whether the polygon can be tapped to trigger an event	`false`	Boolean
editable	Enables editing of the polygon (iOS only)	`false`	Boolean

Note: The coordinates array must form a closed shape, meaning the first and last points should be the same to close the polygon.

Warning: On Android, editable is not supported and will be ignored.

Example: Polygon with Tappable Event

import { MapView } from "react-native-maps";

const polygonCoordinates = [
  { latitude: 37.7849, longitude: -122.409 },
  { latitude: 37.7849, longitude: -122.408 },
  { latitude: 37.7859, longitude: -122.408 },
  { latitude: 37.7859, longitude: -122.409 },
];

<MapView style={{ flex: 1 }}>
  <Polygon
    coordinates={polygonCoordinates}
    strokeColor="#F00"
    strokeWidth={2}
    fillColor="rgba(255, 0, 0, 0.3)"
    tappable={true}
    onPress={(e) => console.log("Polygon tapped", e)}
  />
</MapView>

8. Animating to Region

Example: Animate to Region

import React, { useRef } from 'react';
import MapView, { PROVIDER_GOOGLE } from 'react-native-maps';

const MapScreen = () => {
  const mapRef = useRef(null);

  const animateToRegion = () => {
    mapRef.current.animateToRegion({
      latitude: 37.78825,
      longitude: -122.4324,
      latitudeDelta: 0.0922,
      longitudeDelta: 0.0421,
    }, 3000); // Duration in ms
  };

  return (
    <MapView
      ref={mapRef}
      provider={PROVIDER_GOOGLE}
      style={{ flex: 1 }}
      initialRegion={{
        latitude: 37.78825,
        longitude: -122.4324,
        latitudeDelta: 0.0922,
        longitudeDelta: 0.0421,
      }}
    />
  );
};

export default MapScreen;

Property	Description	Default	Notes
latitude	Latitude of the center of the region	-	Required
longitude	Longitude of the center of the region	-	Required
latitudeDelta	Vertical span of the region (in degrees)	-	Required
longitudeDelta	Horizontal span of the region (in degrees)	-	Required
duration	Animation duration in milliseconds	`500`	Optional, default is 500ms
easing	Easing function for animation	`easeIn`	Optional, supports `easeIn`, `easeOut`, `easeInOut`

Note: The animateToRegion method is available on the MapView component instance and requires a reference to the map.

Warning: Ensure that the latitudeDelta and longitudeDelta values are appropriate to avoid zooming too far in or out.

9. Handling Map Events

Event	Description	Properties
onPress	Triggered when the user presses on the map	`coordinate`, `position`
onLongPress	Triggered when the user long-presses on the map	`coordinate`, `position`
onMarkerPress	Triggered when a marker is pressed	`marker`, `coordinate`
onMarkerSelect	Triggered when a marker is selected	`marker`, `coordinate`
onMarkerDeselect	Triggered when a marker is deselected	`marker`, `coordinate`
onRegionChange	Triggered when the map region changes	`region`, `lastRegion`
onRegionChangeComplete	Triggered when the map region change is complete	`region`

Example: Handling Map Press Event

import { MapView } from "react-native-maps";

const MyMap = () => {
  const handlePress = (e) => {
    console.log("Map pressed at:", e.nativeEvent.coordinate);
  };

  return (
    <MapView
      style={{ flex: 1 }}
      onPress={handlePress}
    />
  );
};

Example: Handling Marker Press

import { MapView, Marker } from "react-native-maps";

const MyMap = () => {
  const handleMarkerPress = (e) => {
    console.log("Marker pressed:", e.nativeEvent);
  };

  return (
    <MapView style={{ flex: 1 }}>
      <Marker
        coordinate={{ latitude: 37.78825, longitude: -122.4324 }}
        onPress={handleMarkerPress}
      />
    </MapView>
  );
};

10. Using Google Maps

Example: Basic Google Maps Integration

import { MapView } from 'react-native-maps';

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

Property	Description	Default
provider	Map provider to use. Set to `MapView.PROVIDER_GOOGLE` for Google Maps.	`MapView.PROVIDER_DEFAULT`
initialRegion	Initial region to display on the map.	None
showsUserLocation	Whether to show the user's location on the map.	`false`

Note: You must configure your Google Maps API key in the app's native configuration files (AndroidManifest.xml for Android, Info.plist for iOS) to use Google Maps.

11. Fitting to Markers

Example: Fit to Markers

import MapView, { Marker } from 'react-native-maps';

<MapView
  ref={mapRef}
  style={{ flex: 1 }}
  initialRegion={{
    latitude: 37.78825,
    longitude: -122.4324,
    latitudeDelta: 0.0922,
    longitudeDelta: 0.0421,
  }}
>
  <Marker
    coordinate={{ latitude: 37.78825, longitude: -122.4324 }}
    title="Marker 1"
  />
  <Marker
    coordinate={{ latitude: 37.78835, longitude: -122.4334 }}
    title="Marker 2"
  />
</MapView>

// Fit to markers
mapRef.current?.fitToSuppliedMarkers(['marker1', 'marker2'], {
  edgePadding: { top: 50, right: 50, bottom: 50, left: 50 },
  animated: true,
});

Property	Description	Default
fitToSuppliedMarkers	Method to adjust the map view to fit specified markers	None
edgePadding	Padding around the markers when fitting	{ top: 0, right: 0, bottom: 0, left: 0 }
animated	Whether to animate the fitting process	false

12. Using Map Callouts

Map callouts are used to display additional information when a user taps on a marker. They can contain custom content like text, images, or buttons.

Property	Description	Values
calloutAnchor	Adjusts the anchor point of the callout	`{ x: number, y: number }`
tooltip	Enables or disables tooltip mode for the callout	`true` \| `false`

Example: Basic Map Callout

<MapView>
  <Marker
    coordinate={{ latitude: 37.78825, longitude: -122.4324 }}>
    <Callout>
      <View style={styles.callout}>
        <Text>Hello from San Francisco!</Text>
      </View>
    </Callout>
  </Marker>
</MapView>

Example: Callout with Image

<Callout>
  <View style={styles.calloutContainer}>
    <Image
      source={{ uri: 'https://example.com/map-marker.png' }}
      style={styles.calloutImage}
    />
    <Text>This is a custom callout</Text>
  </View>
</Callout>