Geolocation and Maps

In this chapter, you’ll learn about the geolocation and mapping capabilities of React Native. You’ll start the learning process with how to use the Geolocation API, and then you’ll move on to using the MapView component to plot points of interest and regions. To do this, we’ll use the react-native-maps package to implement maps.

The goal of this chapter is to go over what’s available in React Native for geolocation and in react-native-maps for maps.

Here’s a list of the topics that we’ll cover in this chapter:

• Using the Geolocation API
• Rendering the map
• Annotating points of interest

Technical requirements

You can find the code file for this chapter on GitHub at https://github.com/PacktPublishing/React-and-React-Native-5E/tree/main/Chapter21.

Using the Geolocation API

The Geolocation API that web applications use to figure out where the user is located can also be used by React Native applications because the same API has been polyfilled. Other than maps, this API is useful for getting precise coordinates from the GPS on mobile devices. You can then use this information to display meaningful location data to the user.

Unfortunately, the data returned by the Geolocation API is of little use on its own. Your code must do the legwork to transform it into something useful. For example, latitude and longitude don’t mean anything to the user, but you can use this data to look up something that is of use to the user. This might be as simple as displaying where the user is currently located.

Let’s implement an example that uses the Geolocation API of React Native to look up coordinates and then use those coordinates to look up human-readable location information from the Google Maps API.

Before we start...

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...

Annotating points of interest

Annotations are exactly what they sound like: additional information rendered on top of the basic map geography. You get annotations by default when you render MapView components. The MapView component can render the user’s current location and points of interest around the user. The challenge here is that you probably want to show the points of interest relevant to your application instead of those rendered by default.

In this section, you’ll learn how to render markers for specific locations on the map, as well as rendering regions on the map.

Plotting points

Let’s plot some local breweries! Here’s how you pass annotations to the MapView component:

<MapView
  style={styles.mapView}
  showsPointsOfInterest={false}
  showsUserLocation
  followsUserLocation
>
  <Marker
    title="Duff Brewery"
    description="Duff beer for me, Duff beer for you"
    coordinate={{
      latitude:...

Summary

In this chapter, you learned about geolocation and mapping in React Native. The Geolocation API works the same as its web counterpart. The only reliable way to use maps in React Native applications is to install the third-party react-native-maps package.

You saw the basic configuration MapView components and how they can track the user’s location and show relevant points of interest. Then, you saw how to plot your own points of interest and regions of interest.

In the next chapter, you’ll learn how to collect user input using React Native components that resemble HTML form controls.