Skip to content

Commit 73f7503

Browse files
committed
fix: make @react-navigation/native an optional peer dependency
Users who do not use the IterableInbox component (or who use a different navigation library) should not be forced to install @react-navigation/native. - Mark @react-navigation/native, react-native-safe-area-context, and react-native-webview as optional in peerDependenciesMeta - Create a safe useIsFocused hook wrapper that gracefully falls back to returning true when @react-navigation/native is not installed - Update IterableInbox to use the wrapper instead of importing directly Closes #770 https://claude.ai/code/session_01SsKoAbA48hJk6cDmbrRGqc
1 parent e69c305 commit 73f7503

4 files changed

Lines changed: 52 additions & 1 deletion

File tree

package.json

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -118,8 +118,17 @@
118118
"react-native-webview": "*"
119119
},
120120
"peerDependenciesMeta": {
121+
"@react-navigation/native": {
122+
"optional": true
123+
},
121124
"expo": {
122125
"optional": true
126+
},
127+
"react-native-safe-area-context": {
128+
"optional": true
129+
},
130+
"react-native-webview": {
131+
"optional": true
123132
}
124133
},
125134
"sideEffects": false,

src/inbox/components/IterableInbox.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import { useIsFocused } from '@react-navigation/native';
21
import { useEffect, useState } from 'react';
32
import {
43
Animated,
@@ -19,6 +18,7 @@ import { Iterable } from '../../core/classes/Iterable';
1918
import { IterableInAppDeleteSource, IterableInAppLocation } from '../../inApp';
2019

2120
import { IterableInboxDataModel } from '../classes';
21+
import { useIsFocused } from '../hooks';
2222
import { ITERABLE_INBOX_COLORS } from '../constants';
2323
import type {
2424
IterableInboxCustomizations,

src/inbox/hooks/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { useIsFocused } from './useIsFocused';

src/inbox/hooks/useIsFocused.ts

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
/**
2+
* Safe wrapper around `@react-navigation/native`'s `useIsFocused` hook.
3+
*
4+
* If `@react-navigation/native` is not installed (i.e., the consumer does not
5+
* use React Navigation), the hook falls back to always returning `true` —
6+
* meaning the component behaves as if it is always focused.
7+
*
8+
* This makes `@react-navigation/native` an optional peer dependency so that
9+
* consumers who don't use the Inbox UI (or who use a different navigation
10+
* library) are not forced to install it.
11+
*
12+
* @see https://github.com/Iterable/react-native-sdk/issues/770
13+
*/
14+
15+
// Use globalThis.require to avoid needing @types/node in the tsconfig while
16+
// still performing a synchronous optional require at module-load time.
17+
declare const globalThis: { require?: (id: string) => unknown };
18+
19+
let useIsFocusedFromNav: (() => boolean) | undefined;
20+
21+
try {
22+
const reactNavigation = globalThis.require?.('@react-navigation/native') as
23+
| { useIsFocused?: () => boolean }
24+
| undefined;
25+
useIsFocusedFromNav = reactNavigation?.useIsFocused;
26+
} catch {
27+
// @react-navigation/native is not installed — that's fine.
28+
}
29+
30+
/**
31+
* Returns whether the screen is currently focused.
32+
*
33+
* Uses React Navigation's `useIsFocused` when available, otherwise defaults
34+
* to `true`.
35+
*/
36+
export function useIsFocused(): boolean {
37+
if (useIsFocusedFromNav) {
38+
return useIsFocusedFromNav();
39+
}
40+
return true;
41+
}

0 commit comments

Comments
 (0)