react-native-maps
- React Native course
- Advanced
- Lesson 25/83
- 5 min
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.
Practice Import the package
Complete the empty file. Import MapView and Marker from react-native-maps. Export them with export { MapView, Marker }.
Starter code
// import MapView and Marker from react-native-maps
// export themSample solution
import { MapView, Marker } from 'react-native-maps';
export { MapView, Marker };Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 What does react-native-maps provide?
- Map view and markers Correct answer
- Only file storage
- Only network requests
- Only camera
Explanation: The package provides map view and markers.
2 Write the import statement
import { MapView, ____ } from 'react-native-maps';import { MapView, Marker } from 'react-native-maps';Explanation: Marker represents the map marker.
3 Match each part to its role
| Term | Meaning |
|---|---|
MapView |
Map view |
Marker |
Map marker |
react-native-maps |
Package name |
Polyline |
Line component |