@otaupdate/react-native 1.0.0

package/src/useOtaUpdate.ts

@@ -0,0 +1,96 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { checkForUpdate, sync } from './OtaUpdate';
+import {
+  InstallMode,
+  SyncStatus,
+  type DownloadProgress,
+  type RemotePackage,
+  type SyncOptions,
+} from './types';
+
+export interface UseOtaUpdateState {
+  status: SyncStatus;
+  progress: DownloadProgress | null;
+  /** Populated when a check found an update that has not been installed yet. */
+  available: RemotePackage | null;
+  error: Error | null;
+  isSyncing: boolean;
+  check(): Promise<void>;
+  update(options?: SyncOptions): Promise<SyncStatus>;
+}
+
+/**
+ * Hook for update UI — a "New version available" banner, a download progress
+ * bar, or a settings screen with a manual "Check for updates" button.
+ */
+export function useOtaUpdate(defaultOptions: SyncOptions = {}): UseOtaUpdateState {
+  const [status, setStatus] = useState<SyncStatus>(SyncStatus.UP_TO_DATE);
+  const [progress, setProgress] = useState<DownloadProgress | null>(null);
+  const [available, setAvailable] = useState<RemotePackage | null>(null);
+  const [error, setError] = useState<Error | null>(null);
+  const mounted = useRef(true);
+
+  useEffect(() => {
+    mounted.current = true;
+    return () => {
+      mounted.current = false;
+    };
+  }, []);
+
+  const check = useCallback(async () => {
+    try {
+      setError(null);
+      setStatus(SyncStatus.CHECKING_FOR_UPDATE);
+      const result = await checkForUpdate(defaultOptions.deploymentKey);
+      if (!mounted.current) return;
+      setAvailable(result.update);
+      setStatus(result.update ? SyncStatus.AWAITING_USER_ACTION : SyncStatus.UP_TO_DATE);
+    } catch (err) {
+      if (!mounted.current) return;
+      setError(err as Error);
+      setStatus(SyncStatus.UNKNOWN_ERROR);
+    }
+    // defaultOptions is intentionally read fresh on each call rather than
+    // captured as a dependency — callers routinely pass an inline object.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [defaultOptions.deploymentKey]);
+
+  const update = useCallback(
+    async (options: SyncOptions = {}) => {
+      setError(null);
+      const result = await sync({
+        installMode: InstallMode.ON_NEXT_RESTART,
+        ...defaultOptions,
+        ...options,
+        onSyncStatusChange: (s) => {
+          if (mounted.current) setStatus(s);
+          defaultOptions.onSyncStatusChange?.(s);
+          options.onSyncStatusChange?.(s);
+        },
+        onDownloadProgress: (p) => {
+          if (mounted.current) setProgress(p);
+          defaultOptions.onDownloadProgress?.(p);
+          options.onDownloadProgress?.(p);
+        },
+      });
+      if (mounted.current && result === SyncStatus.UPDATE_INSTALLED) setAvailable(null);
+      return result;
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [],
+  );
+
+  return {
+    status,
+    progress,
+    available,
+    error,
+    isSyncing:
+      status === SyncStatus.CHECKING_FOR_UPDATE ||
+      status === SyncStatus.DOWNLOADING_PACKAGE ||
+      status === SyncStatus.INSTALLING_UPDATE ||
+      status === SyncStatus.SYNC_IN_PROGRESS,
+    check,
+    update,
+  };
+}

package/src/withOtaUpdate.tsx

@@ -0,0 +1,22 @@
+import React, { useEffect } from 'react';
+import { startAutoSync } from './OtaUpdate';
+import type { OtaOptions } from './types';
+
+/**
+ * Wraps the root component so updates are checked on start and on resume, and
+ * the running bundle is confirmed (rollback-protection) as soon as it mounts.
+ *
+ *   export default withOtaUpdate(App, { sync: { installMode: InstallMode.ON_NEXT_RESUME } })
+ */
+export function withOtaUpdate<P extends object>(
+  Component: React.ComponentType<P>,
+  options: OtaOptions = {},
+): React.ComponentType<P> {
+  const Wrapped: React.FC<P> = (props) => {
+    useEffect(() => startAutoSync(options), []);
+    return <Component {...props} />;
+  };
+
+  Wrapped.displayName = `withOtaUpdate(${Component.displayName ?? Component.name ?? 'Component'})`;
+  return Wrapped;
+}