feat: add devtools package (#8436)

The `devtools` package extracts the redux devtools extension integration to a separate package. In future we can add more tools such as flipper integration to this package.

Usage:

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

example/src/index.tsx

@@ -27,6 +27,7 @@ import {
   DefaultTheme,
   DarkTheme,
   PathConfig,
+  NavigationContainerRef,
 } from '@react-navigation/native';
 import {
   createDrawerNavigator,
@@ -37,6 +38,7 @@ import {
   StackNavigationProp,
   HeaderStyleInterpolators,
 } from '@react-navigation/stack';
+import { useReduxDevToolsExtension } from '@react-navigation/devtools';
 
 import { restartApp } from './Restart';
 import AsyncStorage from './AsyncStorage';
@@ -60,9 +62,6 @@ YellowBox.ignoreWarnings(['Require cycle:', 'Warning: Async Storage']);
 
 enableScreens();
 
-// @ts-ignore
-global.REACT_NAVIGATION_REDUX_DEVTOOLS_EXTENSION_INTEGRATION_ENABLED = true;
-
 type RootDrawerParamList = {
   Root: undefined;
   Another: undefined;
@@ -192,6 +191,10 @@ export default function App() {
     return () => Dimensions.removeEventListener('change', onDimensionsChange);
   }, []);
 
+  const navigationRef = React.useRef<NavigationContainerRef>(null);
+
+  useReduxDevToolsExtension(navigationRef);
+
   if (!isReady) {
     return null;
   }
@@ -204,6 +207,7 @@ export default function App() {
         <StatusBar barStyle={theme.dark ? 'light-content' : 'dark-content'} />
       )}
       <NavigationContainer
+        ref={navigationRef}
         initialState={initialState}
         onStateChange={(state) =>
           AsyncStorage.setItem(