Manual Sync

The manual sync provides a user-controlled interface for triggering data synchronization between the mobile device's health repositories and the ROOK services.

/* eslint-disable react-hooks/exhaustive-deps */
import React, { useState } from "react";
import { Button } from "react-native";
import { Platform, StyleSheet, Text, View } from "react-native";
import { useRookSync } from "react-native-rook-sdk";

export const ManualSync = () => {
  const [syncing, setSyncing] = useState(false);

  const { sync } = useRookSync();

  const handleManualSync = () => {
    setSyncing(true);

    // We implement manual sync with callbacks in order to avoid
    // that the UI get lock while the sync finishes.
    sync((result) => {
      console.log(result);
      setSyncing(false)
    });
 };

  return (
    <View style={styles.container}>
      <Text style={styles.message}>Manual Sync</Text>
      <Button
        title={syncing ? "Syncing" : "Manual Sync"}
        disabled={syncing}
        onPress={handleManualSync}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    paddingHorizontal: 20,
  },
  message: {
    fontSize: 18,
    marginBottom: 20,
    textAlign: "center",
    color: "white",
  },
  extra: {
    marginTop: 50,
  },
});

It leverages a local syncing state to manage the UI lifecycle, ensuring the synchronization button is disabled and its label is updated during an active process to prevent redundant execution. By utilizing an asynchronous callback pattern within the sync function, the component performs the data transfer in the background, allowing the application's main thread to remain responsive and preventing UI freezes while the results are processed.

info

If you need to check the previous way to sync data manually, please refer to the API Reference.