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]); }