feat: provide way to inject focus effect

Author: V3RON

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,31 +1,9 @@
-import { useCallback, useEffect, useRef } from "react";
+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.
-  }
-
-  // No supported router found — fall back to useEffect
-  return (cb: () => void) => {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    useEffect(() => {
-      const cleanup = cb();
-      return typeof cleanup === "function" ? cleanup : undefined;
-    }, [cb]);
-  };
-};
-
-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;