The most recent quantity sample does not update.

[goztrk]

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.

const HeartRateData = () => {
    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 heartRateSample = useMostRecentQuantitySample(
        HKQuantityTypeIdentifier.heartRate
    );

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

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

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

    return (
        <Card>
            <Card.Header title="Heart Rate Data" />
            <Card.Content>
                <Text>Current: {heartRate.current}</Text>
                <Text>Min: {heartRate.min}</Text>
                <Text>Max: {heartRate.max}</Text>
                <Text>Average: {heartRate.average}</Text>
                <Text>Count: {heartRate.samples.length}</Text>
                <Text>History: {heartRate.samples.join(', ')}</Text>
                <Text>Refresh: {refresh}</Text>
            </Card.Content>
            <Card.Footer gap={2}>
                <Button flex label="Clear Data" onPress={clearData} />
                <Button
                    flex
                    label="Refresh"
                    onPress={() => setRefresh((prev) => prev + 1)}
                />
            </Card.Footer>
        </Card>
    );
};

[robertherber]

Are you using the new architecture? In that case #106 might be related.