SyncProgressList

The SyncProgressList component displays real-time synchronization progress for multiple health data types. It provides a comprehensive view of sync status, progress counters, and visual progress indicators for each measurement type being synchronized.

Basic Example

import { MeasurementTypeKey } from "@ovok/core";
import { SyncProgress, SyncProgressList } from "@ovok/native/data-sync";
import React from "react";

const HealthSyncScreen = () => {
  const [syncProgress, setSyncProgress] = React.useState<
    Partial<Record<MeasurementTypeKey, SyncProgress>>
  >({
    [MeasurementTypeKey.bodyWeight]: {
      measurementTypeKey: MeasurementTypeKey.bodyWeight,
      status: "completed",
      progress: {
        done: 100,
        total: 100,
      },
    },
    [MeasurementTypeKey.heartRate]: {
      measurementTypeKey: MeasurementTypeKey.heartRate,
      status: "syncing",
      progress: {
        done: 20,
        total: 100,
      },
    },
    [MeasurementTypeKey.bloodGlucose]: {
      measurementTypeKey: MeasurementTypeKey.bloodGlucose,
      status: "idle",
      progress: {
        done: 0,
        total: 0,
      },
    },
    [MeasurementTypeKey.bloodOxygenPulseRate]: {
      measurementTypeKey: MeasurementTypeKey.bloodOxygenPulseRate,
      status: "paused",
      progress: {
        done: 40,
        total: 100,
      },
    },
    [MeasurementTypeKey.restingHeartRate]: {
      measurementTypeKey: MeasurementTypeKey.restingHeartRate,
      status: "started",
      progress: {
        done: 0,
        total: 0,
      },
    },
  });

  return <SyncProgressList progress={syncProgress} />;
};

export default HealthSyncScreen;

Props

Prop	Type	Default	Description
progress	Partial<Record<MeasurementTypeKey, SyncProgress>> | null | undefined	undefined	Progress data for each measurement type being synced
labelForType	(type: string) => string	SDK translation fallback	Converts a measurement key into display text
statusLabels	Partial<Record<SyncProgress["status"], string>>	SDK translation fallback	Overrides status labels
reasonLabels	Partial<Record<"offline" | "wifi-only", string>>	Raw reason	Overrides pause-reason labels
Text	React.ComponentType<PaperTextProps>	react-native-paper Text	Replaces the text primitive

Component Behavior

Progress Data Structure

Each measurement type progress includes:

• Status: Current sync state (idle, started, syncing, completed, paused, failed)
• Progress Counters: Done and total item counts
• Measurement Type Key: The @ovok/core measurement identifier

Status Display

• Sync Status: Localized status text (for example, "Syncing", "Completed", or "Paused")
• Progress Ratio: "done / total" format for clear progress indication
• Progress Bar: Visual progress bar using the ProgressBar component

Internationalization

• Measurement Names: Uses tile.${measurementType}.label translation keys
• Status Labels: Uses data-sync.status.${status} translation keys
• Automatic Language: Updates based on user's selected language

Styling

Theme Colors Used

• theme.spacing(3) - Gap between measurement type sections
• theme.spacing(1) - Gap between status elements within each section

Related Components

• DataSync - Main compound component
• ProgressBar - Individual progress bar component