diff --git a/packages/devtools/README.md b/packages/devtools/README.md
index fc50241a..ee6d0aa6 100644
--- a/packages/devtools/README.md
+++ b/packages/devtools/README.md
@@ -3,31 +3,3 @@
Developer tools for React Navigation.
Installation instructions and documentation can be found on the [React Navigation website](https://reactnavigation.org/docs/6.x/devtools).
-
-## Installation
-
-Open a Terminal in your project's folder and run,
-
-```sh
-yarn add @react-navigation/devtools
-```
-
-## Usage
-
-For redux dev tools extension integration, you can pass a ref to the container:
-
-```js
-import * as React from 'react';
-import { NavigationContainer } from '@react-navigation/native';
-import { useReduxDevToolsExtension } from '@react-navigation/devtools';
-
-export default function App() {
- const navigationRef = React.useRef();
-
- useReduxDevToolsExtension(navigationRef);
-
- return (
- {/* ... */}
- );
-}
-```
diff --git a/packages/devtools/package.json b/packages/devtools/package.json
index 8f25553f..a2afac9b 100644
--- a/packages/devtools/package.json
+++ b/packages/devtools/package.json
@@ -51,8 +51,7 @@
"typescript": "^4.2.3"
},
"peerDependencies": {
- "react": "*",
- "react-native-flipper": "*"
+ "react": "*"
},
"react-native-builder-bob": {
"source": "src",
diff --git a/packages/devtools/src/useFlipper.tsx b/packages/devtools/src/useFlipper.tsx
index d013e2ee..77983bab 100644
--- a/packages/devtools/src/useFlipper.tsx
+++ b/packages/devtools/src/useFlipper.tsx
@@ -1,12 +1,28 @@
import * as React from 'react';
-import { addPlugin, Flipper } from 'react-native-flipper';
import type { NavigationContainerRef } from '@react-navigation/core';
+import type { Flipper } from 'react-native-flipper';
import { nanoid } from 'nanoid/non-secure';
import useDevToolsBase from './useDevToolsBase';
+let FlipperModule: typeof import('react-native-flipper') | undefined;
+
+try {
+ FlipperModule = require('react-native-flipper');
+} catch (e) {
+ // Do nothing
+}
+
export default function useFlipper(
ref: React.RefObject>
) {
+ if (FlipperModule == null) {
+ throw new Error(
+ "Please install the 'react-native-flipper' package in your project to use Flipper integration for React Navigation."
+ );
+ }
+
+ const { addPlugin } = FlipperModule;
+
const connectionRef = React.useRef();
const { resetRoot } = useDevToolsBase(ref, (...args) => {
@@ -91,5 +107,5 @@ export default function useFlipper(
return false;
},
});
- }, [ref, resetRoot]);
+ }, [addPlugin, ref, resetRoot]);
}