fix: make @react-navigation/native an optional peer dependency

package.json

@@ -118,8 +118,17 @@
     "react-native-webview": "*"
   },
   "peerDependenciesMeta": {
+    "@react-navigation/native": {
+      "optional": true
+    },
     "expo": {
       "optional": true
+    },
+    "react-native-safe-area-context": {
+      "optional": true
+    },
+    "react-native-webview": {
+      "optional": true
     }
   },
   "sideEffects": false,

src/inbox/components/IterableInbox.tsx

@@ -1,4 +1,3 @@
-import { useIsFocused } from '@react-navigation/native';
 import { useEffect, useState } from 'react';
 import {
   Animated,
@@ -19,6 +18,7 @@ import { Iterable } from '../../core/classes/Iterable';
 import { IterableInAppDeleteSource, IterableInAppLocation } from '../../inApp';
 
 import { IterableInboxDataModel } from '../classes';
+import { useIsFocused } from '../hooks';
 import { ITERABLE_INBOX_COLORS } from '../constants';
 import type {
   IterableInboxCustomizations,

src/inbox/hooks/index.ts

@@ -0,0 +1 @@
+export { useIsFocused } from './useIsFocused';

src/inbox/hooks/useIsFocused.ts

@@ -0,0 +1,41 @@
+/**
+ * Safe wrapper around `@react-navigation/native`'s `useIsFocused` hook.
+ *
+ * If `@react-navigation/native` is not installed (i.e., the consumer does not
+ * use React Navigation), the hook falls back to always returning `true` —
+ * meaning the component behaves as if it is always focused.
+ *
+ * This makes `@react-navigation/native` an optional peer dependency so that
+ * consumers who don't use the Inbox UI (or who use a different navigation
+ * library) are not forced to install it.
+ *
+ * @see https://github.com/Iterable/react-native-sdk/issues/770
+ */
+
+// Use globalThis.require to avoid needing @types/node in the tsconfig while
+// still performing a synchronous optional require at module-load time.
+declare const globalThis: { require?: (id: string) => unknown };
+
+let useIsFocusedFromNav: (() => boolean) | undefined;
+
+try {
+  const reactNavigation = globalThis.require?.('@react-navigation/native') as
+    | { useIsFocused?: () => boolean }
+    | undefined;
+  useIsFocusedFromNav = reactNavigation?.useIsFocused;
+} catch {
+  // @react-navigation/native is not installed — that's fine.
+}
+
+/**
+ * Returns whether the screen is currently focused.
+ *
+ * Uses React Navigation's `useIsFocused` when available, otherwise defaults
+ * to `true`.
+ */
+export function useIsFocused(): boolean {
+  if (useIsFocusedFromNav) {
+    return useIsFocusedFromNav();
+  }
+  return true;
+}