Manual Sync

If you want to sync data by clicking a button or when the user open the app, you can do so. The entire file should look like this

/* 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((error, result) => {
      if (error) console.error(error);

      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,
  },
});

info

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