How it works...

By making use of the MapView component provided by Expo, the implementation of a map in your React Native app is now a much simpler and straightforward process than it once was.

In step 3, we made use of the Permissions helper library. Permissions has a method called askAsync, which takes one parameter defining what type of permissions your app would like to request from the user. Permissions also has constants for each type of permission you can request from the user. These permission types include LOCATION, NOTIFICATIONS (which we'll use later in this chapter), CAMERA, AUDIO_RECORDING, CONTACTS, CAMERA_ROLL, and CALENDAR. Since we need the location in this recipe, we passed in the constant Permissions.LOCATION. Once the askAsync return promise resolves, the return object will have a status property and an expiration property. If the user has allowed the requested permission, status will be set to the 'granted'string. If granted, we will fire off our getLocation method.

In step 4, we defined the function that gets the location from the device's GPS. We call the getCurrentPositionAsync method of the Location component. This method will return an object with a coords property and a timestamp property. The coords property gives us access to the latitude and longitude, as well as the altitude, accuracy (radius of uncertainty for the location, measured in meters), altitudeAccuracy (accuracy of the altitude value, in meters (iOS only)), heading, and speed. Once received, we save the location to state so that the render function will be called, and our map will be rendered.

In step 5, we defined the renderMap method to render the map. First, we check whether there is a location, and if there is, we render the MapView element. This element only requires us to define the value for one property: initialRegion. This property takes an object with four properties: latitude, longitude, latitudeDelta, and longitudeDelta. We set the latitude and longitude equal to those in the state object, and provide initial values for latitudeDelta and longitudeDelta. These last two properties dictate the initial zoom level that the map should be rendered at; the larger this number is, the more zoomed out the map will be. I suggest experimenting with these two values to see how they affect the rendered map.

In step 6, we added the marker to the map by adding a MapView.Marker element as a child of the MapView element. We defined the coordinates by passing the info saved on state (state.location.coords) to the coords property, and set a title and description for the marker's popup when tapped. We were also able to easily define a custom pin by inlining our custom image with a require statement in the image property.