'Expo location returns undefined
my useLocation hook returns undefined when I wanna use it. Why its not working?
import {useState, useEffect} from "react";
import * as Location from "expo-location";
export default () => {
const [location, setLocation] = useState();
const getLocation = async () => {
try {
const {granted} = await Location.requestForegroundPermissionsAsync();
if (!granted) return;
const {
coords: {latitude, longitude},
} = await Location.getCurrentPositionAsync();
setLocation({latitude, longitude});
} catch (error) {
console.log(error);
}
};
useEffect(() => {
getLocation().catch(err => console.log(err));
}, []);
return location;
}
import React from 'react'
import {StyleSheet, ActivityIndicator, StatusBar} from 'react-native'
import {SafeAreaView} from 'react-navigation'
import MapView from 'react-native-maps'
import useLocation from "../hook/useLocation";
const MapScreen = () => {
const currentLocation = useLocation(); // it always returns undefined
if (!currentLocation) return <ActivityIndicator size="large" style={{marginTop: 200}} color="#121212"/>
return (
<SafeAreaView
style={styles.container}
>
<StatusBar
translucent
backgroundColor={'#121212'}
barStyle='light-content'
/>
<MapView
style={styles.map}
initialRegion={{
...currentLocation.coords,
latitudeDelta: 0.01,
longitudeDelta: 0.01
}}
/>
</SafeAreaView>
)
}
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
