Bucci83
commented
1 year ago I had a similar issue, and I was also using setInterval but that is a bit clunky solution, here is how I do it
` useFocusEffect(
useCallback(() => {
//Watch position for changes
const watchId = Geolocation.watchPosition(
pos => {
console.log('Position has changed', pos);
const latitude = pos.coords.latitude;
const longitude = pos.coords.longitude;
setOrigin({
latitude: latitude,
longitude: longitude,
latitudeDelta: LATITUDE_DELTA,
longitudeDelta: LONGITUDE_DELTA,
});
},
error => {
console.log('!!!!!!Error watching position: ', error);
},
{
distanceFilter: 20,
},
);
setSubscriptionId(watchId);
return () => {
console.log('REMOVE WATCH LOCATION');
subscriptionId !== null && Geolocation.clearWatch(subscriptionId);
setSubscriptionId(null);
setIsOpenMap(false);
setOrigin({});
setDestination({});
};
}, []),);`
if you test on emulator it wont' work because you are not moving, unless you manually change long / lat, but if you deploy on your phone you will be able to see the location changing, add an Alert to view it on screen. watchPosition internally monitors the coordinates so you don't need to set an interval to check it...
**btw I use FocusEffect because react native handles the destroy on useEffect different than reactJs, if you change screen, the previous one won't be unmounted, it will still be active in the stack, so you won't run the cleanup "return"statement, with focusEffect, it will run cleanup as soon as you switch to another screen, removing the monitoring of the location... this approach works for me because I just need to monitor the location in one part of the app.
hopefully it helps you!
hllibrhm01
spsaucier
johhansantana
Siliconvelly
shuo-hiwintech
Environment
System: OS: macOS 13.1 CPU: (8) arm64 Apple M1 Memory: 233.67 MB / 16.00 GB Shell: 5.8.1 - /bin/zsh Binaries: Node: 16.14.2 - ~/.nvm/versions/node/v16.14.2/bin/node Yarn: 1.22.19 - /opt/homebrew/bin/yarn npm: 8.5.0 - ~/.nvm/versions/node/v16.14.2/bin/npm Watchman: 2022.11.14.00 - /opt/homebrew/bin/watchman Managers: CocoaPods: 1.11.3 - /opt/homebrew/bin/pod SDKs: iOS SDK: Platforms: DriverKit 22.2, iOS 16.2, macOS 13.1, tvOS 16.1, watchOS 9.1 Android SDK: Not Found IDEs: Android Studio: 2021.3 AI-213.7172.25.2113.9123335 Xcode: 14.2/14C18 - /usr/bin/xcodebuild Languages: Java: 11.0.17 - /usr/bin/javac npmPackages: @react-native-community/cli: Not Found react: 18.1.0 => 18.1.0 react-native: 0.70.6 => 0.70.6 react-native-macos: Not Found npmGlobalPackages: react-native: Not Found
Platforms
Only any android version
Versions
Description
Only getCurrentPosition function works on Android devices but its not working watchPosition function. I run the getCurrentPosition function in setInterval when I want to track location. It just gives me that fixed location and i can't do instant location tracking. Although I tried many methods, I could not get it to work. I want to follow the vehicle instantly. Thanks in advance for your help.
Reproducible Demo
const interval = setInterval(async () => { Geolocation.getCurrentPosition(info => { setCurrentLatitude(info.coords.latitude); setCurrentLongitude(info.coords.longitude); });
try { const watchID = Geolocation.watchPosition( position => { console.warn(JSON.stringify(position)); }); setSubscriptionId(watchID); } catch (error) { console.error('WatchPosition Error', JSON.stringify(error)); } };