fix: fallback to useEffect when no navigation library is available (#5)

Author: malopezr7

src/react-native/focus-effect.ts

@@ -0,0 +1,41 @@
+import { useEffect } from "react";
+
+const getDefaultFocusEffectFactory = (): ((cb: () => void) => void) => {
+  try {
+    return require("expo-router").useFocusEffect;
+  } catch {
+    // Nothing we can do about it, it's not installed in the project.
+  }
+
+  try {
+    return require("@react-navigation/native").useFocusEffect;
+  } catch {
+    // Nothing we can do about it, it's not installed in the project.
+  }
+
+  console.warn(
+    "[react-native-grab] No supported router found — falling back to useEffect. This may cause issues. Provide a custom focus effect using the setFocusEffect function.",
+  );
+
+  const useFallbackFocusEffect = (cb: () => void) => {
+    useEffect(() => {
+      return cb();
+    }, [cb]);
+  };
+
+  return useFallbackFocusEffect;
+};
+
+let cachedFocusEffect: ((cb: () => void) => void) | null = null;
+
+export const getFocusEffect = (): ((cb: () => void) => void) => {
+  if (!cachedFocusEffect) {
+    cachedFocusEffect = getDefaultFocusEffectFactory();
+  }
+
+  return cachedFocusEffect;
+};
+
+export const setFocusEffect = (impl: (cb: () => void) => void) => {
+  cachedFocusEffect = impl;
+};

src/react-native/grab-screen.tsx

@@ -1,24 +1,9 @@
 import { useCallback, useRef } from "react";
 import { View, type ViewProps } from "react-native";
 import { setFocusedScreenRef } from "./containers";
+import { getFocusEffect } from "./focus-effect";
 
-const getFocusEffectImpl = (): ((cb: () => void) => void) => {
-  try {
-    return require("expo-router").useFocusEffect;
-  } catch {
-    // Nothing we can do about it, it's not installed in the project.
-  }
-
-  try {
-    return require("@react-navigation/native").useFocusEffect;
-  } catch {
-    // Nothing we can do about it, it's not installed in the project.
-  }
-
-  throw new Error("No useFocusEffect implementation found");
-};
-
-const useFocusEffect = getFocusEffectImpl();
+const useFocusEffect = getFocusEffect();
 
 export type ReactNativeGrabScreenProps = ViewProps;
 

src/react-native/index.ts

@@ -30,3 +30,7 @@ export const ReactNativeGrabContextProvider: React.ComponentType<ReactNativeGrab
 export const enableGrabbing: () => void = __DEV__
   ? require("./grab-controller").enableGrabbing
   : noop;
+
+export const setFocusEffect: (impl: (cb: () => void) => void) => void = __DEV__
+  ? require("./focus-effect").setFocusEffect
+  : noop;