How to Use Maps in React Native: Simple Guide with Example

To use maps in React Native, install the react-native-maps library and use its MapView component to display maps. You can customize the map with markers, regions, and styles by passing props to MapView and its child components.

Syntax

The main component to display a map is MapView from react-native-maps. You specify the map region using initialRegion or region props. To add markers, use the Marker component inside MapView.

• MapView: The map container.
• initialRegion: Sets the starting map area with latitude, longitude, latitudeDelta, and longitudeDelta.
• Marker: Adds a pin or marker on the map at a specific coordinate.

jsx

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

<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 }} />
</MapView>

Output

A full-screen map centered on latitude 37.78825 and longitude -122.4324 with a single marker pin at the same location.

Example

This example shows a simple React Native app displaying a map with one marker. It uses react-native-maps to render the map and places a marker pin at a specific location.

jsx

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

export default function App() {
  return (
    <View style={styles.container}>
      <MapView
        style={styles.map}
        initialRegion={{
          latitude: 37.78825,
          longitude: -122.4324,
          latitudeDelta: 0.0922,
          longitudeDelta: 0.0421,
        }}
      >
        <Marker coordinate={{ latitude: 37.78825, longitude: -122.4324 }} />
      </MapView>
    </View>
  );
}

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

Output

The app shows a full-screen interactive map centered on San Francisco with a red marker pin at the center location.

Common Pitfalls

Common mistakes when using maps in React Native include:

• Not installing or linking react-native-maps properly.
• Forgetting to add required permissions for location or map usage on iOS and Android.
• Using incorrect latitudeDelta and longitudeDelta values, which control zoom level.
• Not setting a fixed height or flex style on the MapView, causing it not to appear.

Always check platform setup instructions in the react-native-maps documentation.

jsx

/* Wrong: Missing style causes map not to show */
<MapView initialRegion={{ latitude: 0, longitude: 0, latitudeDelta: 1, longitudeDelta: 1 }} />

/* Right: Add style to fill container */
<MapView style={{ flex: 1 }} initialRegion={{ latitude: 0, longitude: 0, latitudeDelta: 1, longitudeDelta: 1 }} />

Quick Reference

Key props for MapView:

• initialRegion: Sets the initial map area.
• region: Controls the map area dynamically.
• style: Controls map size and layout.
• showsUserLocation: Shows the user's current location.
• onRegionChange: Callback when map region changes.

Marker props:

• coordinate: Position of the marker.
• title: Text shown on tap.
• description: Additional info on tap.

Key Takeaways

Install and import react-native-maps to use MapView and Marker components.

Always set a style with height or flex on MapView to make it visible.

Use initialRegion with latitude, longitude, latitudeDelta, and longitudeDelta to control map view.

Add markers inside MapView using the Marker component with coordinate prop.

Check platform-specific setup and permissions for maps on iOS and Android.