Title: React Native Geolocation not working on Android device, but works on emulator
I’m having trouble getting geolocation to work in my React Native app on Android. The problem occurs when I build the APK and install it on a real device. It’s not fetching the location latitude and longitude(Given the app permission of location). However, if I install the APK on any emulator, it works fine. Can anyone suggest what might be causing this issue?
Here’s the relevant code:
import Geolocation from '@react-native-community/geolocation';
const [location, setLocation] = useState(null);
const [isLoadingLocation, setIsLoadingLocation] = useState(false);
const requestLocationPermission = async () => {
if (Platform.OS === 'android') {
try {
const granted = await PermissionsAndroid.request(
PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION,
{
title: 'Location Permission',
message: 'This app needs access to your location for attendance tracking.',
buttonNeutral: 'Ask Me Later',
buttonNegative: 'Cancel',
buttonPositive: 'OK',
}
);
return granted === PermissionsAndroid.RESULTS.GRANTED;
} catch (err) {
console.warn('Permission request error:', err);
return false;
}
}
return true;
};
const checkLocationPermission = async () => {
if (Platform.OS === 'android') {
const granted = await PermissionsAndroid.check(PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION);
return granted;
}
return true; // For iOS, permissions are handled differently
};
const getLocation = useCallback(async () => {
setErrorMsg(null);
const hasPermission = await checkLocationPermission();
if (!hasPermission) {
const retry = await requestLocationPermission(); // Prompt for permission
if (!retry) {
Alert.alert(
'Error',
'Location permission denied. Please enable it in settings.',
[{ text: 'OK' }]
);
return; // Exit if permission is denied
}
}
Geolocation.getCurrentPosition(
position => {
const loc = {
latitude: position.coords.latitude,
longitude: position.coords.longitude,
};
console.log('Location obtained:', loc);
setLocation(loc);
},
error => {
console.log('GeolocationError:', error);
setErrorMsg('Error getting location');
Alert.alert('Error', `Error getting location: ${error.message}`);
},
{
enableHighAccuracy: false,
timeout: 20000,
maximumAge: 1000,
},
);
}, []);
useEffect(() => {
const fetchLocation = async () => {
try {
await getLocation();
} catch (error) {
console.error('Error fetching location on mount:', error);
}
};
fetchLocation();
}, [getLocation]);
What I tried:
Set up geolocation using @react-native-community/geolocation in my React Native app.
Implemented Android permission handling (both checking and requesting).
Wrote a getLocation function to fetch the current position.
Used useEffect to call this function when the component mounts.
Built the APK and tested on both an Android emulator and my actual Android phone.
What I expected:
The app to work just as well on my real Android device as it did on the emulator.
To see those latitude and longitude numbers pop up on my phone screen.
What actually happened:
On the Android emulator: It’s all good! Location fetched and displayed perfectly.
On my real Android device: Total letdown. No location data at all.
Instead, I’m getting this frustrating “Error getting location” message.(But at emulator its showing no problem)