The UI freezes when calling onLocation only in Android

[tuannth]

Your Environment

• Plugin version: 4.16.5
• Platform: Android
• OS version: 12
• Device manufacturer / model: Samsung Galaxy M51
• React Native version (react-native -v): 0.71.4

• Plugin config

  useEffect(() => {
  
  BackgroundGeolocation.ready(
    {
      // Geolocation Config
      desiredAccuracy: BackgroundGeolocation.DESIRED_ACCURACY_HIGH,
      distanceFilter: 20,
      locationAuthorizationRequest: 'WhenInUse',
      preventSuspend: true,
      geofenceModeHighAccuracy: true,
      // Activity Recognition
      stationaryRadius: 25,
      stopTimeout: 5,
      // Application config
      logLevel: BackgroundGeolocation.LOG_LEVEL_OFF,
      stopOnTerminate: false, // <-- Allow the background-service to continue tracking when app terminated.
      startOnBoot: false, // <-- Auto start tracking when device is powered-up.
      autoSync: false, // <-- Set true to sync each location to server as it arrives.
      desiredOdometerAccuracy: Platform.select({ android: 90, ios: 100 }),
    },
    (state) => {
      !state.enabled && BackgroundGeolocation.start()
  
      setLoading(false)
    }
  )
  
  socket.emit(SocketChannel.USER_CONNECTION, {
    userId: account.id,
  })
  
  socket.on(SocketChannel.RECEIVE_LOCATION, (dataLocation) => {
    dataLocation?.data?.users &&
      setData((prev) =>
        JSON.stringify(prev) !== JSON.stringify(dataLocation?.data?.users)
          ? dataLocation?.data?.users
          : prev
      )
    if (dataLocation?.data?.stops?.length) {
      stopIdAroundUser.current = dataLocation?.data?.stops?.map(
        (item) => item?.id
      )
      showModalServiceAhead.current = Boolean(
        stopIdAroundUser.current?.length
      )
    }
    if (dataLocation?.data?.reports?.length) {
      for (let item of dataLocation?.data?.reports) {
        if (
          !showReportRef.current.showBannerReport &&
          !showReportRef.current.id.includes(item?.id)
        ) {
          showReportRef.current = {
            data: item,
            showBannerReport: true,
            id: [...showReportRef.current.id, item?.id],
          }
          break
        } else {
          if (
            showReportRef.current.showBannerReport &&
            item?.id === showReportRef.current.data?.id
          ) {
            showReportRef.current = {
              data: null,
              showBannerReport: false,
              id: showReportRef.current.id,
            }
            break
          }
        }
      }
    }
  })
  
  socket.on(SocketChannel.EVENT, (coordinates) => {
    if (coordinates?.data?.[route?.params?.detailEvent?.id as string]) {
      const stringifyData = coordinates?.data?.[
        route?.params?.detailEvent?.id as string
      ]
        .map((item) => item?.old_coord)
        ?.filter((item) => item)
  
      const stringifyCollectedPoint = coordinatePointCollected.current?.map(
        (item) => JSON.stringify(item)
      )
      const stringifyNotCollectPoint =
        coordinatePointNotCollected.current?.map((item) =>
          JSON.stringify(item)
        )
  
      const collectedPointAfterChange = stringifyCollectedPoint?.map((item) =>
        stringifyData?.includes(item)
          ? coordinates?.data?.[
              route?.params?.detailEvent?.id as string
            ]?.find((record) => record?.old_coord === item)?.new_coord // update + create
          : JSON.parse(item)
      )
  
      const notCollectPointAfterChange = stringifyNotCollectPoint?.map(
        (item) =>
          stringifyData?.includes(item)
            ? coordinates?.data?.[
                route?.params?.detailEvent?.id as string
              ]?.find((record) => record?.old_coord === item)?.new_coord // update + create
            : JSON.parse(item)
      )
  
      coordinatePointCollected.current = collectedPointAfterChange?.filter(
        //filter delete point
        (item) => item
      )
  
      coordinatePointNotCollected.current = notCollectPointAfterChange
        ?.filter((item) => item) //filter delete point
        ?.concat(
          coordinates?.data?.[route?.params?.detailEvent?.id as string]
            ?.filter((item) => !item?.old_coord)
            ?.map((item) => item?.new_coord)
        ) //and create new point
  
      setReRenderCoordinate(true)
    }
  })
  
  const onLocation = BackgroundGeolocation.onLocation(
    async (location) => {
      const { latitude, longitude, speed, heading } = location.coords
      console.log(location.coords)
  
      if (!firstLocationRef.current) {
        firstLocationRef.current = {
          latitude: latitude,
          longitude: longitude,
        }
        setUserLocation((prev) => ({
          ...prev,
          latitude: latitude,
          longitude: longitude,
        }))
      } else if (
        checkLocationHasChanged({
          prevLat: userLocation.latitude,
          prevLon: userLocation.longitude,
          presentLat: latitude,
          presentLon: longitude,
        })
      ) {
        setUserLocation((prev) => ({
          latitude: Number(speed) > 0 ? latitude : prev?.latitude,
          longitude: Number(speed) > 0 ? longitude : prev?.longitude,
          speed: Number(speed) > 0 ? Number(speed) * 3.6 : prev?.speed,
          heading: Number(heading),
          distance:
            Number((location?.odometer / 1000).toFixed(2)) ?? prev?.distance,
        }))
      }
      if (
        checkLocationHasChanged({
          prevLat: prevLocation?.current?.latitude,
          prevLon: prevLocation?.current?.longitude,
          presentLat: latitude,
          presentLon: longitude,
        })
      ) {
        socket.volatile.emit(SocketChannel.LOCATION, {
          data: {
            user_id: account?.id,
            current_position: [longitude, latitude],
            mode: userMobilityMode.current || MobilityModeEnum?.walk,
          },
        })
  
        if (isRunningRef.current && Number(speed) > 0) {
          routePassed.current = [
            ...routePassed.current,
            [longitude, latitude],
          ]
  
          mapRef.current?.animateToRegion({
            latitude,
            longitude,
            latitudeDelta: zoomLevel.current.latitudeDelta,
            longitudeDelta: zoomLevel.current.longitudeDelta,
          })
  
          for (
            let i = coordinatePointNotCollected.current.length - 1;
            i >= 0;
            i--
          ) {
            const distanceToJoyPoint = calculateDistance(
              latitude,
              longitude,
              coordinatePointNotCollected.current?.[i]
            )
  
            if (Math.floor(distanceToJoyPoint) <= 30) {
              coordinatePointCollected.current = [
                ...coordinatePointCollected.current,
                coordinatePointNotCollected.current?.[i],
              ]
  
              coordinatePointNotCollected.current =
                coordinatePointNotCollected.current.filter(
                  (_, ind) => ind !== i
                )
  
              userMobilityMode?.current === MobilityModeType.Cycle
                ? soundCollect.current?.play()
                : soundStart.current?.play()
              collectedPoint.current = collectedPoint.current + 1
            }
          }
        }
      }
  
      prevLocation.current = {
        latitude: location?.coords?.latitude,
        longitude: location?.coords?.longitude,
      }
    },
    () => {
      showToastError({
        title: t('toast.failed'),
        message: t('error.errorGetLocation'),
      })
      setLoading(false)
    }
  )
  
  return () => {
    socket.emit(SocketChannel.USER_DISCONNECT, {
      userId: account.id,
    })
    socket.off(SocketChannel.RECEIVE_LOCATION)
    socket.off(SocketChannel.EVENT)
    onLocation.remove()
    BackgroundGeolocation.stop()
  }
  }, [])

Expected Behavior

App run smoothly

Actual Behavior

When the user runs approximately 10 km at an average speed of 30 km/h, the UI freezes.

Steps to Reproduce

1. Start moving
2. Run about 10km at an average speed of 30km/h
3. This issue is coming

Context

Debug logs

Logs

``` PASTE_YOUR_LOGS_HERE ```

[christocracy]

The UI freezes when calling onLocation only in Android

Likely due to your own code. The first thing I’d do is comment-out all my code within .onLocation.

id also be observing my device logs with $ adb logcat

see wiki “Debugging”.