Геолокація

Разом із мапами часто використовують геолокацію. Цей модуль використовують для визначення місця розташування пристрою. Щоб використовувати цей модуль потрібно встановити пакет expo-location.

terminal

npx expo install expo-location

Для роботи геолокації потрібно отримати дозвіл користувача на визначення його геопозиції. Для цього використовується метод Location.requestPermissionsAsync. Під час появи мапи на екрані, можна запустити метод Location.getCurrentPositionAsync і отримати координати пристрою.

Резервний код

App.js

import React, { useState, useEffect } from "react";
import { View, StyleSheet, Dimensions } from "react-native";
import MapView, { Marker } from "react-native-maps";
import * as Location from "expo-location";

export default function App() {
  const [location, setLocation] = useState(null);

  useEffect(() => {
    (async () => {
      let { status } = await Location.requestForegroundPermissionsAsync();
      if (status !== "granted") {
        console.log("Permission to access location was denied");
      }

      let location = await Location.getCurrentPositionAsync({});
      const coords = {
        latitude: location.coords.latitude,
        longitude: location.coords.longitude,
      };
      setLocation(coords);
    })();
  }, []);

  return (
    <View style={styles.container}>
      <MapView
        style={styles.map}
        region={{
          ...location,
          latitudeDelta: 0.0922,
          longitudeDelta: 0.0421,
        }}
        showsUserLocation={true}
        mapType="standard"
      >
        {location && (
          <Marker
            title="I am here"
            coordinate={location}
            description="My mark"
          />
        )}
        <Marker
          title="Maidan Nezalezhnosti"
          coordinate={{ latitude: 50.450958, longitude: 30.5232558 }}
          description="Kyiv Center"
        />
      </MapView>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
  },
  map: {
    // width: "100%",
    // height: "100%",
    width: Dimensions.get("window").width,
    height: Dimensions.get("window").height,
  },
});

Документація:

Location