How to display user location in reactive native maps and expo - react-native

Question

I have the user's location but I can't seem to display it on the map, here's my code:
useEffect(() => {
(async () => {
let { status } = await Location.requestForegroundPermissionsAsync();
if (status !== 'granted') {
setErrorMsg('Permission to access location was denied');
return;
}
let location = await Location.getCurrentPositionAsync({});
setLocation(location);
})();
}, []);
let text = 'Waiting..';
if (errorMsg) {
text = errorMsg;
} else if (location) {
text = JSON.stringify(location);
}
let userLatitude = text.latitude
let userLongitude = text.longitude
return (
<View style={styles.layout}>
<MapView style={styles.map}>
<MapView.Marker
coordinate={{latitude: userLatitude,
longitude: userLongitude}}
title={"title"}
description={"description"}
/>
</MapView>
</View>
);
I got most of my code off of the expo location documentation, so I don't know what I'm doing wrong.

Answer 1

There is nothing in these variables
let userLatitude = text.latitude // undefined
let userLongitude = text.longitude // undefined
Location.getCurrentPositionAsync() returns object:
Object {
"coords": Object {
"accuracy": 5,
"altitude": 0,
"altitudeAccuracy": -1,
"heading": -1,
"latitude": 47.0448,
"longitude": 37.976,
"speed": -1,
},
"timestamp": 1659337371953.4102,
}
Working code example:
export default function App() {
const [userLocation, setUerLocation] = useState(null);
useEffect(() => {
(async () => {
// ... persmissions check
const location = await Location.getCurrentPositionAsync();
setUerLocation(location);
})()
}, [])
return (
<View style={styles.container}>
<MapView style={{width: '100%', height: '100%'}}>
{userLocation && <Marker coordinate={userLocation.coords} />}
</MapView>
</View>
);
}

Answer 2

if you have the user's foreground permission, you can see the location of the user directly inside the MapView component. There is a showsUserLocation prop that defaults to false. Set that to true and it should show up (fingers crossed ;).
return (
<View style={styles.layout}>
<MapView style={styles.map}
showsUserLocation={true}
followsUserLocation={true}
>
// (markers, geojson etc go here)
</MapView>
</View>
);