react-native-maps

What is react-native-maps?

The react-native-maps package provides a set of components for displaying and interacting with maps in React Native applications. It supports both Google Maps and Apple Maps, and offers a variety of features such as markers, polygons, and custom map styles.

What are react-native-maps's main functionalities?

Displaying a Map

This feature allows you to display a map in your React Native application. The initialRegion prop sets the initial region displayed by the map.

import MapView from 'react-native-maps';

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

Adding Markers

This feature allows you to add markers to the map. Markers can have coordinates, titles, and descriptions.

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

const MyMapWithMarkers = () => (
  <MapView
    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={'My Marker'}
      description={'This is a description of the marker'}
    />
  </MapView>
);

Drawing Polygons

This feature allows you to draw polygons on the map. Polygons are defined by an array of coordinates and can have custom fill and stroke colors.

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

const MyMapWithPolygon = () => (
  <MapView
    style={{ flex: 1 }}
    initialRegion={{
      latitude: 37.78825,
      longitude: -122.4324,
      latitudeDelta: 0.0922,
      longitudeDelta: 0.0421,
    }}
  >
    <Polygon
      coordinates={[
        { latitude: 37.8025259, longitude: -122.4351431 },
        { latitude: 37.7896386, longitude: -122.421646 },
        { latitude: 37.7665248, longitude: -122.4161628 },
        { latitude: 37.7734153, longitude: -122.4577787 },
        { latitude: 37.7948605, longitude: -122.4596065 },
      ]}
      fillColor={'rgba(100, 200, 200, 0.3)'}
      strokeColor={'rgba(0,0,0,0.5)'}
      strokeWidth={2}
    />
  </MapView>
);

Custom Map Styles

This feature allows you to apply custom styles to the map. The customMapStyle prop takes an array of style objects that define the appearance of various map elements.

import MapView from 'react-native-maps';

const MyStyledMap = () => (
  <MapView
    style={{ flex: 1 }}
    customMapStyle={[
      {
        elementType: 'geometry',
        stylers: [
          {
            color: '#242f3e'
          }
        ]
      },
      {
        elementType: 'labels.text.stroke',
        stylers: [
          {
            color: '#242f3e'
          }
        ]
      },
      {
        elementType: 'labels.text.fill',
        stylers: [
          {
            color: '#746855'
          }
        ]
      }
    ]}
    initialRegion={{
      latitude: 37.78825,
      longitude: -122.4324,
      latitudeDelta: 0.0922,
      longitudeDelta: 0.0421,
    }}
  />
);

Other packages similar to react-native-maps

react-native-maps-directions

The react-native-maps-directions package is an extension for react-native-maps that provides directions functionality. It allows you to draw routes between two points on the map. This package is useful if you need to provide navigation features in your app, but it requires react-native-maps as a dependency.

react-native-mapbox-gl

The react-native-mapbox-gl package provides a React Native binding for Mapbox GL, a powerful and customizable map rendering library. Compared to react-native-maps, it offers more advanced features and better performance for complex maps, but it requires a Mapbox account and API key.

react-native-google-maps

The react-native-google-maps package is a wrapper around the Google Maps SDK for iOS and Android. It offers similar functionality to react-native-maps but is specifically tailored for Google Maps. It provides better integration with Google Maps services but lacks support for Apple Maps.

README

react-native-mapview

React Native MapView component for iOS + Android

Examples

MapView Events

The <MapView /> component and its child components have several events that you can subscribe to. This example displays some of them in a log as a demonstration.

Tracking Region / Location

Programmatically Changing Region

One can change the mapview's position using refs and component methods, or by passing in an updated region prop. The component methods will allow one to animate to a given position like the native API could.

Arbitrary React Views as Markers

Using the MapView with the Animated API

The <MapView /> component can be made to work with the Animated API, having the entire region prop be declared as an animated value. This allows one to animate the zoom and position of the MapView along with other gestures, giving a nice feel.

Further, Marker views can use the animated API to enhance the effect.

Issue: Since android needs to render its marker views as a bitmap, the animations APIs may not be compatible with the Marker views. Not sure if this can be worked around yet or not.

Polygon Creator

Other Overlays

So far, <Circle />, <Polygon />, and <Polyline /> are available to pass in as children to the <MapView /> component.

Default Markers

Default markers will be rendered unless a custom marker is specified. One can optionally adjust the color of the default marker by using the pinColor prop.

Custom Callouts

Callouts to markers can be completely arbitrary react views, similar to markers. As a result, they can be interacted with like any other view.

Additionally, you can fall back to the standard behavior of just having a title/description through the <Marker />'s title and description props.

Custom callout views can be the entire tooltip bubble, or just the content inside of the system default bubble.

Image-based Markers

Markers can be customized by just using images, and specified using the image prop.

NOTE: this isn't implemented properly yet.

Component API

Using with the Animated API

Remaining Issues

Discussion Points