79090213

Date: 2024-10-15 13:42:15
Score: 2
Natty:
Report link

Here’s how you can implement the features:

Use react-native-maps to show a map.

npx expo install react-native-maps

Display a map with markers (you can custom markers check the doc):

import MapView, { Marker } from "react-native-maps";

const MyMap = () => {
  const markers = [
    { id: 1, latitude: 48.8564449, longitude: 2.4002913, title: "Location" }
  ];

  return (
    <MapView
      style={{ flex: 1 }}
      initialRegion={{
        latitude: 48.856614,
        longitude: 2.3522219,
        latitudeDelta: 0.2,
        longitudeDelta: 0.2
      }}
      showsUserLocation={true}
    >
      {markers.map(marker => (
        <Marker
          key={marker.id}
          coordinate={{ latitude: marker.latitude, longitude: marker.longitude }}
          title={marker.title}
        />
      ))}
    </MapView>
  );
};

Use expo-location to retrieve the user's current location:

npx expo install expo-location

import React, { useEffect, useState } from "react";
import { Text, View } from "react-native";
import * as Location from "expo-location";

const GetUserLocation = () => {
  const [coords, setCoords] = useState(null);
  const [error, setError] = useState(null);

  useEffect(() => {
    const askPermission = async () => {
      const { status } = await Location.requestForegroundPermissionsAsync();
      if (status === "granted") {
        const location = await Location.getCurrentPositionAsync();
        setCoords(location.coords);
      } else {
        setError("Permission denied");
      }
    };

    askPermission();
  }, []);

  return (
    <View>
      {error ? <Text>{error}</Text> : <Text>User Location: {coords ? `${coords.latitude}, ${coords.longitude}` : "Loading..."}</Text>}
    </View>
  );
};

To open a native maps app for location selection, check out the react-native-map-link library, and for calculating distances the geolib library.

I hope my help was useful to you! Please let me know if it helped.

Reasons:
  • RegEx Blacklisted phrase (2.5): Please let me know
  • Long answer (-1):
  • Has code block (-0.5):
  • Low reputation (1):
Posted by: Tomsko