The most recent quantity sample does not update

[audn]

I have a very simple component to test the incoming data. The problem is, the data is not being updated if the app is active. If I switch to another app and back, the update happens.

I am starting a workout from my Apple Watch and the data is still not being updated.

I also tried to add a refresh button to force the component to re-render but it didn't help

import { Text } from "@/components/ui/themed";
import { useMostRecentQuantitySample } from '@kingstinct/react-native-healthkit';
import React from "react";
import { TouchableOpacity, View } from "react-native";

export const WorkoutAppleHealthInfo = () => {
    const [heartRate, setHeartRate] = React.useState<{
        current: number;
        min: number;
        max: number;
        average: number;
        samples: number[];
    }>({ current: 0, min: 0, max: 0, average: 0, samples: [] });

    const [refresh, setRefresh] = React.useState(0);

    const heartRateSample = useMostRecentQuantitySample("HKQuantityTypeIdentifierHeartRate");

    React.useEffect(() => {
        if (heartRateSample) {
            setHeartRate((prev) => {
                const quantity = Math.round(heartRateSample.quantity);
                const samples = [...prev.samples, quantity];
                return {
                    current: quantity,
                    samples,
                    min: Math.min(...samples),
                    max: Math.max(...samples),
                    average: Math.round(samples.reduce((a, b) => a + b, 0) / samples.length),
                };
            });
        }
    }, [heartRateSample]);

    const clearData = () => setHeartRate({ current: 0, min: 0, max: 0, average: 0, samples: [] });

    const rows = [
        ["Current", heartRate.current],
        ["Min", heartRate.min],
        ["Max", heartRate.max],
        ["Average", heartRate.average],
        ["Count", heartRate.samples.length],
        ["Refresh", refresh],
    ];

    return (
        <View className="p-4 bg-app-100 rounded-xl gap-2">
            <Text className="font-bold text-base">Heart Rate Debug</Text>

            {rows.map(([label, value]) => (
                <View key={label} className="flex-row justify-between">
                    <Text className="text-on-200">{label}</Text>
                    <Text>{value}</Text>
                </View>
            ))}

            <Text className="text-on-200">History: {heartRate.samples.join(', ') || '-'}</Text>

            <View className="flex-row gap-2 mt-2">
                <TouchableOpacity onPress={clearData} className="flex-1 bg-app-200 p-2 rounded-lg items-center">
                    <Text>Clear</Text>
                </TouchableOpacity>
                <TouchableOpacity onPress={() => setRefresh(p => p + 1)} className="flex-1 bg-app-200 p-2 rounded-lg items-center">
                    <Text>Refresh</Text>
                </TouchableOpacity>
            </View>
        </View>
    );
};

Version:13.2.3
Expo 54.0.33
React Naitve: 0.81.5 (new arch)

[audn]

same as #115