react-native-maps

Learn to display maps with react-native-maps.

The react-native-maps package

To show a map in React Native you use the react-native-maps package. This package wraps the Google Maps (Android) and Apple Maps (iOS) infrastructure; it offers a consistent interface on both platforms. With Expo you install it with npx expo install react-native-maps.

Two main pieces are imported from the package: MapView (the map view) and Marker (a marker on the map). The syntax: import { MapView, Marker } from 'react-native-maps'. These two components work together; MapView draws the map and Marker drops a pin at a specific coordinate. Once the user grants location permission you can also show their own location on the map.

Import

From the react-native-maps package you import MapView and Marker with curly braces. The syntax: import { MapView, Marker } from 'react-native-maps'. The names in curly braces are the named exports of the package.

These two components are the foundation of a map app. MapView shows the map surface on the screen; Marker drops a marker at a specific coordinate. In addition there are components like Polyline (line) and Polygon (area); but in this lesson we focus only on MapView and Marker. All components of the package are React components; they are configured with props.

Exercise Import the package

Complete the empty file. Import MapView and Marker from react-native-maps. Export them with export { MapView, Marker }.

Show example solution

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

export { MapView, Marker };

Test yourself

What does react-native-maps provide?
- Map view and markers
- Only file storage
- Only network requests
- Only camera
Show answer

Map view and markers — The package provides map view and markers.

Write the import statement

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

Show answer

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

Match each part to its role

MapView

Map view
Marker

Map marker
react-native-maps

Package name
Polyline

Line component

Next lesson: MapView

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies