react-native-maps - Maps

Display interactive maps in your app!

Installation

npx expo install react-native-maps

Basic map

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

function AtlantisMap() {
  const initialRegion = {
    latitude: 37.78825,
    longitude: -122.4324,
    latitudeDelta: 0.0922,
    longitudeDelta: 0.0421,
  };

  return (
    <MapView
      style={{ flex: 1 }}
      provider={PROVIDER_GOOGLE}
      initialRegion={initialRegion}
      showsUserLocation
      showsMyLocationButton
    >
      <Marker
        coordinate={{ latitude: 37.78825, longitude: -122.4324 }}
        title="Poseidon's Palace"
        description="Seat of the ruler of the seas"
      />
    </MapView>
  );
}

Markers and callout

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

const locations = [
  { id: '1', lat: 37.78, lng: -122.43, title: 'Temple of Neptune' },
  { id: '2', lat: 37.79, lng: -122.42, title: 'Arena of Tritons' },
];

function MarkersMap() {
  return (
    <MapView style={{ flex: 1 }}>
      {locations.map((loc) => (
        <Marker
          key={loc.id}
          coordinate={{ latitude: loc.lat, longitude: loc.lng }}
        >
          <Callout>
            <View style={styles.callout}>
              <Text style={styles.calloutTitle}>{loc.title}</Text>
              <Pressable onPress={() => navigateTo(loc.id)}>
                <Text>Details</Text>
              </Pressable>
            </View>
          </Callout>
        </Marker>
      ))}
    </MapView>
  );
}

Polyline and Polygon

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

// Route
<Polyline
  coordinates={[
    { latitude: 37.78, longitude: -122.43 },
    { latitude: 37.79, longitude: -122.42 },
    { latitude: 37.80, longitude: -122.41 },
  ]}
  strokeColor="#1a5276"
  strokeWidth={3}
/>

// Area
<Polygon
  coordinates={[...]}
  fillColor="rgba(26, 82, 118, 0.3)"
  strokeColor="#1a5276"
/>

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

const locations = [
  { id: '1', latitude: 37.785, longitude: -122.432, title: 'Temple of Poseidon' },
  { id: '2', latitude: 37.790, longitude: -122.425, title: 'Arena of Tritons' },
  { id: '3', latitude: 37.788, longitude: -122.420, title: 'Pearl Market' },
];

export default function App() {
  return (
    <MapView
      style={styles.map}
      // TODO: add the showsUserLocation prop to display the player's position
      initialRegion={{
        latitude: 37.788,
        longitude: -122.426,
        // TODO: fill in latitudeDelta and longitudeDelta (e.g. 0.02) to set the zoom
      }}
    >
      {/* TODO: iterate over the locations array with .map() and return a <Marker> for each location */}
      {/* Each Marker needs: key={loc.id}, coordinate={{ latitude, longitude }} and title={loc.title} */}

    </MapView>
  );
}

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