Hi All,
I am new to Expo and loving it so far.
I am looking at location services and have taken some sample code and modified it.
The code checks for appropriate permissions then calls getCurrentPositionAsync, but immediately triggers the error clause (Could not fetch location). It does not get to the ‘Fired Location’ alert.
Can someone suggest where I have gone wrong or where I can find more details on the error.
Code below, any help much appreciated.
import React, { useState, useEffect } from ‘react’;
import {
View,
Button,
Text,
ActivityIndicator,
Alert,
StyleSheet
} from ‘react-native’;
import * as Location from ‘expo-location’;
import * as Permissions from ‘expo-permissions’;
import Colors from ‘…/constants/Colors’;
import MapPreview from ‘./MapPreview’;
const LocationPicker = props => {
const [isFetching, setIsFetching] = useState(false);
const [pickedLocation, setPickedLocation] = useState();
const verifyPermissions = async () => {
const result = await Permissions.askAsync(Permissions.LOCATION);
if (result.status !== 'granted') {
Alert.alert(
'Insufficient permissions!',
'You need to grant location permissions to use this app.',
[{ text: 'Okay' }]
);
return false;
}
Alert.alert ('Permissions OK');
return true;
};
const getLocationHandler = async () => {
const hasPermission = await verifyPermissions();
if (!hasPermission) {
return;
}
try {
setIsFetching(true);
const location = await Location.getCurrentPositionAsync({
timeout: 500000
});
Alert.alert ('Fired Location');
setPickedLocation({
lat: location.coords.latitude,
lng: location.coords.longitude
});
props.onLocationPicked({
lat: location.coords.latitude,
lng: location.coords.longitude
});
} catch (err) {
Alert.alert(
'Could not fetch location!',
'Please try again later or pick a location on the map.',
[{ text: 'Okay' }]
);
}
setIsFetching(false);
};
return (
<View style={styles.locationPicker}>
<View style={styles.actions}>
<Button
title="Get User Location"
color={Colors.primary}
onPress={getLocationHandler}
/>
</View>
</View>
);
};
const styles = StyleSheet.create({
locationPicker: {
marginBottom: 15
},
mapPreview: {
marginBottom: 10,
width: '100%',
height: 150,
borderColor: '#ccc',
borderWidth: 1
},
actions: {
flexDirection: 'row',
justifyContent: 'space-around',
width: '100%'
}
});
export default LocationPicker;