refactor: implement renderPushPermissionPrompt and remove onBeforePushPermissionRequest

damlayildiz · damlayildiz · commit e3a7f22396bb · 2026-01-30T15:14:04.000+01:00
diff --git a/README.md b/README.md
@@ -331,7 +331,7 @@ Main provider component that enables sync functionality.
 | `syncMode`                      | `'polling' \| 'push'`       | ❌       | Sync mode (default: `'polling'`)                           |
 | `adaptivePolling`               | `AdaptivePollingConfig`     | ❌       | Adaptive polling configuration (polling mode only)         |
 | `notificationListening`         | `'foreground' \| 'always'`  | ❌       | When to listen for push notifications (push mode only)     |
-| `onBeforePushPermissionRequest` | `() => Promise<boolean>`    | ❌       | Custom UI before system permission prompt (push mode only) |
+| `renderPushPermissionPrompt`    | `(props: { allow: () => void; deny: () => void }) => ReactNode` | ❌ | Render prop for permission prompt UI (push mode only) |
 | `onDatabaseReady`               | `(db: DB) => Promise<void>` | ❌       | Callback after DB opens, before sync init (for migrations) |
 | `debug`                         | `boolean`                   | ❌       | Enable debug logging (default: `false`)                    |
 | `children`                      | `ReactNode`                 | ✅       | Child components                                           |
@@ -439,54 +439,30 @@ Use `onDatabaseReady` to run migrations or other setup after the database opens
 >
 ```
 
-#### Custom Push Permission UI with `onBeforePushPermissionRequest`
+#### Custom Push Permission UI with `renderPushPermissionPrompt`
 
-When using push mode, the system will prompt the user for notification permissions. Use `onBeforePushPermissionRequest` to show your own UI (e.g., an explanation modal) before the system prompt appears. Return `true` to proceed with the system prompt, or `false` to skip it.
+When using push mode, the system will prompt the user for notification permissions. Use `renderPushPermissionPrompt` to show your own UI before the system prompt appears. The render prop receives `allow` and `deny` callbacks — no Promise or ref boilerplate needed.
 
-```typescript
-import { useState, useCallback, useRef } from 'react';
-import { Modal, View, Text, TouchableOpacity } from 'react-native';
-
-export default function App() {
-  const [showDialog, setShowDialog] = useState(false);
-  const resolverRef = useRef<((value: boolean) => void) | null>(null);
-
-  const handleBeforePermission = useCallback(async () => {
-    return new Promise<boolean>((resolve) => {
-      resolverRef.current = resolve;
-      setShowDialog(true);
-    });
-  }, []);
-
-  return (
-    <>
-      <Modal visible={showDialog} transparent>
-        <View style={{ flex: 1, justifyContent: 'center', padding: 24 }}>
-          <Text>Enable notifications for real-time sync?</Text>
-          <TouchableOpacity onPress={() => {
-            setShowDialog(false);
-            resolverRef.current?.(true); // Proceed to system prompt
-          }}>
-            <Text>Enable</Text>
-          </TouchableOpacity>
-          <TouchableOpacity onPress={() => {
-            setShowDialog(false);
-            resolverRef.current?.(false); // Skip, fall back to polling
-          }}>
-            <Text>Not Now</Text>
-          </TouchableOpacity>
-        </View>
-      </Modal>
-      <SQLiteSyncProvider
-        syncMode="push"
-        onBeforePushPermissionRequest={handleBeforePermission}
-        // ...other props
-      >
-        <YourApp />
-      </SQLiteSyncProvider>
-    </>
-  );
-}
+```tsx
+<SQLiteSyncProvider
+  syncMode="push"
+  renderPushPermissionPrompt={({ allow, deny }) => (
+    <Modal visible animationType="fade" transparent>
+      <View style={{ flex: 1, justifyContent: 'center', padding: 24 }}>
+        <Text>Enable notifications for real-time sync?</Text>
+        <TouchableOpacity onPress={allow}>
+          <Text>Enable</Text>
+        </TouchableOpacity>
+        <TouchableOpacity onPress={deny}>
+          <Text>Not Now</Text>
+        </TouchableOpacity>
+      </View>
+    </Modal>
+  )}
+  // ...other props
+>
+  <YourApp />
+</SQLiteSyncProvider>
 ```
 
 #### `AdaptivePollingConfig`
diff --git a/examples/sync-demo-bare/src/App.tsx b/examples/sync-demo-bare/src/App.tsx
@@ -1,4 +1,4 @@
-import { useState, useMemo } from 'react';
+import { useState, useMemo, useEffect } from 'react';
 import {
   Text,
   View,
@@ -45,7 +45,27 @@ import {
  */
 function TestApp() {
   const { writeDb, initError } = useSqliteDb();
-  const { isSyncReady, isSyncing, lastSyncTime, syncError } = useSyncStatus();
+  const { isSyncReady, isSyncing, lastSyncTime, syncError, currentSyncInterval } = useSyncStatus();
+  const [nextSyncIn, setNextSyncIn] = useState<number | null>(null);
+
+  useEffect(() => {
+    if (!lastSyncTime || !currentSyncInterval) {
+      setNextSyncIn(null);
+      return;
+    }
+
+    const update = () => {
+      const remaining = Math.max(
+        0,
+        Math.ceil((lastSyncTime + currentSyncInterval - Date.now()) / 1000)
+      );
+      setNextSyncIn(remaining);
+    };
+
+    update();
+    const id = setInterval(update, 1000);
+    return () => clearInterval(id);
+  }, [lastSyncTime, currentSyncInterval]);
   const [searchText, setSearchText] = useState('');
   const [text, setText] = useState('');
   const [rowNotification, setRowNotification] = useState<string | null>(null);
@@ -151,6 +171,11 @@ function TestApp() {
               Last sync: {new Date(lastSyncTime).toLocaleTimeString()}
             </Text>
           )}
+          {nextSyncIn != null && (
+            <Text style={styles.status}>
+              Next sync in {nextSyncIn}s
+            </Text>
+          )}
         </View>
 
         {/* SEARCH BAR */}
diff --git a/examples/sync-demo-expo/src/App.tsx b/examples/sync-demo-expo/src/App.tsx
@@ -1,4 +1,4 @@
-import { useState, useMemo, useCallback, useRef, useEffect } from 'react';
+import { useState, useMemo, useEffect } from 'react';
 import {
   Text,
   View,
@@ -86,7 +86,27 @@ registerBackgroundSyncCallback(
  */
 function TestApp({ deviceToken }: { deviceToken: string | null }) {
   const { writeDb, initError } = useSqliteDb();
-  const { isSyncReady, isSyncing, lastSyncTime, syncError } = useSyncStatus();
+  const { isSyncReady, isSyncing, lastSyncTime, syncError, currentSyncInterval } = useSyncStatus();
+  const [nextSyncIn, setNextSyncIn] = useState<number | null>(null);
+
+  useEffect(() => {
+    if (!lastSyncTime || !currentSyncInterval) {
+      setNextSyncIn(null);
+      return;
+    }
+
+    const update = () => {
+      const remaining = Math.max(
+        0,
+        Math.ceil((lastSyncTime + currentSyncInterval - Date.now()) / 1000)
+      );
+      setNextSyncIn(remaining);
+    };
+
+    update();
+    const id = setInterval(update, 1000);
+    return () => clearInterval(id);
+  }, [lastSyncTime, currentSyncInterval]);
   const [searchText, setSearchText] = useState('');
   const [text, setText] = useState('');
   const [rowNotification, setRowNotification] = useState<string | null>(null);
@@ -206,6 +226,11 @@ function TestApp({ deviceToken }: { deviceToken: string | null }) {
               Last sync: {new Date(lastSyncTime).toLocaleTimeString()}
             </Text>
           )}
+          {nextSyncIn != null && (
+            <Text style={styles.status}>
+              Next sync in {nextSyncIn}s
+            </Text>
+          )}
         </View>
 
         {/* SEARCH BAR */}
@@ -355,8 +380,6 @@ function PermissionDialog({
 }
 
 export default function App() {
-  const [showPermissionDialog, setShowPermissionDialog] = useState(false);
-  const permissionResolverRef = useRef<((value: boolean) => void) | null>(null);
   const [deviceToken, setDeviceToken] = useState<string | null>(null);
 
   useEffect(() => {
@@ -365,26 +388,6 @@ export default function App() {
       .catch(() => setDeviceToken('Failed to get token'));
   }, []);
 
-  // Callback to show custom UI before system permission request
-  const handleBeforePushPermissionRequest = useCallback(async () => {
-    return new Promise<boolean>((resolve) => {
-      permissionResolverRef.current = resolve;
-      setShowPermissionDialog(true);
-    });
-  }, []);
-
-  const handlePermissionAllow = useCallback(() => {
-    setShowPermissionDialog(false);
-    permissionResolverRef.current?.(true);
-    permissionResolverRef.current = null;
-  }, []);
-
-  const handlePermissionDeny = useCallback(() => {
-    setShowPermissionDialog(false);
-    permissionResolverRef.current?.(false);
-    permissionResolverRef.current = null;
-  }, []);
-
   if (
     !SQLITE_CLOUD_CONNECTION_STRING ||
     !SQLITE_CLOUD_API_KEY ||
@@ -405,36 +408,31 @@ export default function App() {
   }
 
   return (
-    <>
-      <PermissionDialog
-        visible={showPermissionDialog}
-        onAllow={handlePermissionAllow}
-        onDeny={handlePermissionDeny}
-      />
-      <SQLiteSyncProvider
-        connectionString={SQLITE_CLOUD_CONNECTION_STRING}
-        databaseName={DATABASE_NAME}
-        tablesToBeSynced={[
-          {
-            name: TABLE_NAME,
-            createTableSql: `
-              CREATE TABLE IF NOT EXISTS ${TABLE_NAME} (
-                id TEXT PRIMARY KEY NOT NULL,
-                value TEXT,
-                created_at TEXT DEFAULT CURRENT_TIMESTAMP
-              );
-            `,
-          },
-        ]}
-        syncMode="push"
-        notificationListening="always"
-        onBeforePushPermissionRequest={handleBeforePushPermissionRequest}
-        apiKey={SQLITE_CLOUD_API_KEY}
-        debug={true}
-      >
-        <TestApp deviceToken={deviceToken} />
-      </SQLiteSyncProvider>
-    </>
+    <SQLiteSyncProvider
+      connectionString={SQLITE_CLOUD_CONNECTION_STRING}
+      databaseName={DATABASE_NAME}
+      tablesToBeSynced={[
+        {
+          name: TABLE_NAME,
+          createTableSql: `
+            CREATE TABLE IF NOT EXISTS ${TABLE_NAME} (
+              id TEXT PRIMARY KEY NOT NULL,
+              value TEXT,
+              created_at TEXT DEFAULT CURRENT_TIMESTAMP
+            );
+          `,
+        },
+      ]}
+      syncMode="push"
+      notificationListening="always"
+      renderPushPermissionPrompt={({ allow, deny }) => (
+        <PermissionDialog visible onAllow={allow} onDeny={deny} />
+      )}
+      apiKey={SQLITE_CLOUD_API_KEY}
+      debug={true}
+    >
+      <TestApp deviceToken={deviceToken} />
+    </SQLiteSyncProvider>
   );
 }
 
diff --git a/src/core/SQLiteSyncProvider.tsx b/src/core/SQLiteSyncProvider.tsx
@@ -63,7 +63,7 @@ export function SQLiteSyncProvider({
   adaptivePolling,
   syncMode = 'polling',
   notificationListening = 'foreground',
-  onBeforePushPermissionRequest,
+  renderPushPermissionPrompt,
   onDatabaseReady,
   debug = false,
   children,
@@ -147,12 +147,13 @@ export function SQLiteSyncProvider({
   });
 
   /** RESET INTERVAL ON CONFIG CHANGE */
-  const prevSyncModeRef = useRef(syncMode);
+  const prevEffectiveSyncModeRef = useRef(effectiveSyncMode);
   const prevIdleMultiplierRef = useRef(adaptiveConfig.idleBackoffMultiplier);
   const prevErrorMultiplierRef = useRef(adaptiveConfig.errorBackoffMultiplier);
 
   useEffect(() => {
-    const syncModeChanged = prevSyncModeRef.current !== syncMode;
+    const syncModeChanged =
+      prevEffectiveSyncModeRef.current !== effectiveSyncMode;
     const idleChanged =
       prevIdleMultiplierRef.current !== adaptiveConfig.idleBackoffMultiplier;
     const errorChanged =
@@ -161,7 +162,7 @@ export function SQLiteSyncProvider({
     if (syncModeChanged || idleChanged || errorChanged) {
       if (syncModeChanged) {
         logger.info(
-          `🔄 Sync mode changed to '${syncMode}' - resetting interval state`
+          `🔄 Sync mode changed to '${effectiveSyncMode}' - resetting interval state`
         );
       } else {
         logger.info(
@@ -171,20 +172,20 @@ export function SQLiteSyncProvider({
 
       setConsecutiveEmptySyncs(0);
 
-      if (syncMode === 'polling') {
+      if (effectiveSyncMode === 'polling') {
         setCurrentInterval(adaptiveConfig.baseInterval);
         currentIntervalRef.current = adaptiveConfig.baseInterval;
       } else {
         setCurrentInterval(null);
         currentIntervalRef.current = null;
       }
 
-      prevSyncModeRef.current = syncMode;
+      prevEffectiveSyncModeRef.current = effectiveSyncMode;
       prevIdleMultiplierRef.current = adaptiveConfig.idleBackoffMultiplier;
       prevErrorMultiplierRef.current = adaptiveConfig.errorBackoffMultiplier;
     }
   }, [
-    syncMode,
+    effectiveSyncMode,
     adaptiveConfig.idleBackoffMultiplier,
     adaptiveConfig.errorBackoffMultiplier,
     adaptiveConfig.baseInterval,
@@ -237,15 +238,15 @@ export function SQLiteSyncProvider({
   }, [logger]);
 
   /** PUSH NOTIFICATIONS - Only active when syncMode is 'push' */
-  usePushNotificationSync({
+  const { permissionPromptNode } = usePushNotificationSync({
     isSyncReady,
     performSyncRef,
     writeDbRef,
     syncMode: effectiveSyncMode,
     notificationListening,
     logger,
     onPermissionsDenied: handlePermissionsDenied,
-    onBeforePushPermissionRequest,
+    renderPushPermissionPrompt,
     connectionString,
     databaseName,
     tablesToBeSynced,
@@ -314,6 +315,7 @@ export function SQLiteSyncProvider({
         <SQLiteSyncStatusContext.Provider value={syncStatusContextValue}>
           <SQLiteSyncActionsContext.Provider value={syncActionsContextValue}>
             {children}
+            {permissionPromptNode}
           </SQLiteSyncActionsContext.Provider>
         </SQLiteSyncStatusContext.Provider>
       </SQLiteDbContext.Provider>
diff --git a/src/core/pushNotifications/usePushNotificationSync.ts b/src/core/pushNotifications/usePushNotificationSync.ts
diff --git a/src/types/SQLiteSyncProviderProps.ts b/src/types/SQLiteSyncProviderProps.ts
