fix: make react-native-flipper optional in devtools

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 (
-    <NavigationContainer ref={navigationRef}>{/* ... */}</NavigationContainer>
-  );
-}
-```

packages/devtools/package.json

@@ -51,8 +51,7 @@
     "typescript": "^4.2.3"
   },
   "peerDependencies": {
-    "react": "*",
-    "react-native-flipper": "*"
+    "react": "*"
   },
   "react-native-builder-bob": {
     "source": "src",

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<NavigationContainerRef<any>>
 ) {
+  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<Flipper.FlipperConnection>();
 
   const { resetRoot } = useDevToolsBase(ref, (...args) => {
@@ -91,5 +107,5 @@ export default function useFlipper(
         return false;
       },
     });
-  }, [ref, resetRoot]);
+  }, [addPlugin, ref, resetRoot]);
 }