React does not rerender state change update by geolocation plugin

Ionic Framework
1

I am testing @mauron85/cordova-plugin-background-geolocation plugin with react. Location update events fired by this plugin update the state variable from React.useState hook and the state is rendered to the screen. I noticed it stops rerendering location data on the screen until I touch it again. It does not happen in the emulator, but happens on my mobile phone. Screen updates are stopped about 10-20 seconds before the screen goes to sleep mode. Here is the simple component code reproducing the problem:

import React from 'react'
import { isPlatform } from '@ionic/react';

import { BackgroundGeolocation, BackgroundGeolocationEvents, BackgroundGeolocationResponse, BackgroundGeolocationLocationProvider } from '@ionic-native/background-geolocation';

export const LocationTracker = () => {
    const [location, setLocation] = React.useState<BackgroundGeolocationResponse[]>([])
    React.useEffect(() => {
        if (!isPlatform('hybrid')) {
            return () => {}
        }
        
        BackgroundGeolocation.configure({
            locationProvider: BackgroundGeolocationLocationProvider.RAW_PROVIDER,
            // desiredAccuracy: 0, //BackgroundGeolocationAccuracy.HIGH,
            stationaryRadius: 50,
            distanceFilter: 10,
            notificationTitle: 'Background tracking',
            notificationText: 'enabled',
            debug: true,
            interval: 10000,
            fastestInterval: 500,
            activitiesInterval: 60000,
        })

        BackgroundGeolocation.on(BackgroundGeolocationEvents.location).subscribe(
            (location: BackgroundGeolocationResponse) => {
                console.log(location)
                setLocation(p => [location])
                BackgroundGeolocation.finish(); // FOR IOS ONLY, IMPORTANT!
            });

        BackgroundGeolocation.start();
        
        return () => {
            BackgroundGeolocation.removeAllListeners();
            BackgroundGeolocation.stop();
        }
    }, [])
    
    return (<>{
        location.map(l => <p key={l.id}>{new Date(l.time).toString()}: {l.speed}, {l.latitude}, {l.longitude}, {l.accuracy}</p>)
    }</>);
}

What am I missing? Should I do something else to keep the screen up to date with the state data?

1 Like
2

Did you find any solution?