Skip to content

Commit e68c570

Browse files
fix: make @react-navigation/native an optional dependency
The SDK imported useIsFocused directly from @react-navigation/native, making it a hard dependency even for users who don't use the inbox feature or use a different navigation library. This wraps the import in a try/catch with a fallback to always-focused behavior, and marks the peer dependency as optional. Fixes #770 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
1 parent e69c305 commit e68c570

4 files changed

Lines changed: 40 additions & 2 deletions

File tree

package.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -118,6 +118,9 @@
118118
"react-native-webview": "*"
119119
},
120120
"peerDependenciesMeta": {
121+
"@react-navigation/native": {
122+
"optional": true
123+
},
121124
"expo": {
122125
"optional": true
123126
}

src/core/hooks/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
11
export * from './useAppStateListener';
22
export * from './useDeviceOrientation';
3+
export * from './useIsFocused';

src/core/hooks/useIsFocused.ts

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
/**
2+
* A wrapper around `useIsFocused` from `@react-navigation/native` that
3+
* gracefully falls back to `true` when react-navigation is not installed.
4+
*
5+
* This allows the SDK to work without requiring `@react-navigation/native`
6+
* as a hard dependency. Users who do not use react-navigation (or do not use
7+
* the inbox feature with navigation) will not need to install it.
8+
*
9+
* @see https://github.com/Iterable/react-native-sdk/issues/770
10+
*/
11+
12+
let reactNavigationHook: (() => boolean) | undefined;
13+
14+
try {
15+
// Dynamic import via require is necessary here to gracefully handle the case
16+
// where @react-navigation/native is not installed.
17+
// eslint-disable-next-line @typescript-eslint/no-require-imports, @typescript-eslint/no-var-requires
18+
const reactNavigation = require('@react-navigation/native');
19+
reactNavigationHook = reactNavigation.useIsFocused;
20+
} catch {
21+
// @react-navigation/native is not installed
22+
}
23+
24+
/**
25+
* Returns whether the screen is currently focused.
26+
*
27+
* If `@react-navigation/native` is installed, this delegates to its
28+
* `useIsFocused` hook. Otherwise it returns `true` (always focused).
29+
*/
30+
export function useIsFocused(): boolean {
31+
if (reactNavigationHook) {
32+
return reactNavigationHook();
33+
}
34+
return true;
35+
}

src/inbox/components/IterableInbox.tsx

Lines changed: 1 addition & 2 deletions
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,
@@ -11,7 +10,7 @@ import {
1110
import { SafeAreaView } from 'react-native-safe-area-context';
1211

1312
import RNIterableAPI from '../../api';
14-
import { useAppStateListener, useDeviceOrientation } from '../../core';
13+
import { useAppStateListener, useDeviceOrientation, useIsFocused } from '../../core';
1514
// expo throws an error if this is not imported directly due to circular
1615
// dependencies
1716
// See: https://github.com/expo/expo/issues/35100

0 commit comments

Comments
 (0)