Day 9 - July 8, 2022

Topics Covered

Geolocation
Requesting user location
Displaying maps
Working with maps

Requesting user location

The geolocation API that is used by web applications to figure out where the user is located can also be used by React Native applications. This API is useful for getting the precise coordinates from the GPS on mobile devices. You can use this information for customizing user content or for "big data" analytics.

In the code example, we obtain and display the latitude and longitude from the geolocation API. Normally, displaying this information isn't too helpful for the users of your application. Rather than displaying the coordinates, we could use this information to perform lookups. Maybe we can display information about restaurants or hotels that are nearby.

The getCurrentPosition() and watchPosition() functions run asyncronously. Remember, it is a good practice use the useEffect hook to prevent unexpected behaviour.

Code Example

import React, { useState, useEffect } from "react";
import { View, Text } from "react-native";

export default function App() {
    const [longitude, setLongitude] = useState();
    const [latitude, setLatitude] = useState();

useEffect(() => {
        // Accepts the current latitude and longitude
        // and updates the state variables
        function setPosition({ coords: { latitude, longitude } }) {
            setLongitude(longitude);
            setLatitude(latitude);
        }

// Use navigator to get access to the devices' GPS
        navigator.geolocation.getCurrentPosition(setPosition);

// Update the coordinates as the device is moved
        let watcher = navigator.geolocation.watchPosition(
            setPosition,
            err => console.error(err),
            { enableHighAccuracy: true }
        );

// When the component is unmounted, clear the watcher
        // since it is no longer necessary to track location
        return () => {
            navigator.geolocation.clearWatch(watcher);
        };
    });

return (
        <View>
            <Text>Latitude: {latitude}</Text>
            <Text>Longitude: {longitude}</Text>
        </View>
    );
};

Displaying maps

By importing the react-native-maps package, we gain access to the MapView component. MapView allows us to easily render maps. In this code example, a map containing a marker at your current location is rendered. In order for the example to work, you may need to grant location access to your application.

Code Example

By enabling showsUserLocation a marker is placed on the map. To keep the location information up-to-date, you should normally set followUserLocation as well.

Working with maps

The previous map displayed a single marker showing the location of your device. It would be handy to add other features to the map. Built-in to the MapView component, the user's current location and points of interest around the user can be rendered. You will probably want to add additional points of interest that are relevant to your application, instead of the points of interest that are rendered by default. Let's begin by adding additional points to the map.

Code Example

Output

You can also render polygon features as well. Here is an example.

Code Example

import React from "react";
import { StyleSheet, View } from "react-native";
import MapView from "react-native-maps";

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: "center",
        alignItems: "center",
        backgroundColor: "ghostwhite"
    },

mapView: {
        alignSelf: "stretch",
        height: "100%",
    }
});

export default function App() {
    return (
        <View style={styles.container}>
            <MapView
                style={styles.mapView}
                showsUserLocation
                followUserLocation
                showsPointsOfInterest={false}
            >
            <MapView.Polygon
                coordinates={
                    [
                        { latitude: 43.79701, longitude: -79.35178 },
                        { latitude: 43.79849, longitude: -79.34530 },
                        { latitude: 43.79483, longitude: -79.34612 },
                        { latitude: 43.79382, longitude: -79.35049 }
                    ]
                }
                strokeWidth={3}
                strokeColor="red"
            />
            </MapView>
        </View>
    )
}

Output

You can learn more about the MapView component and features by visiting the react-native-maps GitHub page.

WEB530

Day 9 - July 8, 2022

Topics Covered

Requesting user location

Displaying maps

Working with maps