Rendering the map

The MapView component from react-native-maps is the main tool you’ll use to render maps in your React Native applications. It offers a wide range of tools for rendering maps, markers, polygons, heatmaps, and the like.

You can find more information about react-native-maps on the website: https://github.com/react-native-maps/react-native-maps.

Let’s now implement a basic MapView component to see what you get out of the box:

import { View, StatusBar } from "react-native";
import MapView from "react-native-maps";
import styles from "./styles";
StatusBar.setBarStyle("dark-content");
export default () => (
  <View style={styles.container}>
    <MapView style={styles.mapView} showsUserLocation followsUserLocation />
  </View>
);

The two Boolean properties that you’ve passed to MapView do a lot of work for you. The showsUserLocation property will activate the marker on the map, which denotes the physical location of the device running this application. The followsUserLocation property tells the map to update the location marker as the device moves around.

Here is the resulting map:

Figure 21.2: Current location

The current location of the device is clearly marked on the map. By default, points of interest are also rendered on the map. These are things close to the user so that they can see what’s around them.

It’s generally a good idea to use the followsUserLocation property whenever using showsUserLocation. This makes the map zoom to the region where the user is located.

In the following section, you’ll learn how to annotate points of interest on your maps.