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.