Mismatch between useReactNavigationDevTools and React Navigation container

[nikero41]

Applying the example to a latest React Navigation and Expo project got me this error.

I believe this happens due to React Navigation having this type as the returned navigationRef

export type NavigationContainerRefWithCurrent<ParamList extends {}> =
  NavigationContainerRef<ParamList> & {
    current: NavigationContainerRef<ParamList> | null;
  };

While the dev tool expects the current property to not be null.

[prabhg]

I have the same issue. It started after upgrading expo-router to v5, so am assuming the return value type of useNavigationContainerRef got updated in this version.

[0xFA11]

getting the same error using with expo-router

import { useNavigationContainerRef } from "expo-router";
import { useReactNavigationDevTools } from "@dev-plugins/react-navigation";

export default () => {
    const navigationRef = useNavigationContainerRef();
    useReactNavigationDevTools(navigationRef);
    //                         ^ error line here, passing navigationRef
    // ...
};

"@dev-plugins/react-navigation": "0.3.1" & "expo-router": "5.0.7"

any thoughts @EvanBacon ?

[jerone]

I have resolved this with a patch via patch-package:

diff --git a/node_modules/@dev-plugins/react-navigation/build/useReactNavigationDevTools.d.ts b/node_modules/@dev-plugins/react-navigation/build/useReactNavigationDevTools.d.ts
index bec27df..7c19082 100644
--- a/node_modules/@dev-plugins/react-navigation/build/useReactNavigationDevTools.d.ts
+++ b/node_modules/@dev-plugins/react-navigation/build/useReactNavigationDevTools.d.ts
@@ -1,3 +1,3 @@
 import type { NavigationContainerRef } from '@react-navigation/core';
-export declare function useReactNavigationDevTools(ref: React.RefObject<NavigationContainerRef<any>>): void;
+export declare function useReactNavigationDevTools(ref: React.RefObject<NavigationContainerRef<any> | null>): void;
 //# sourceMappingURL=useReactNavigationDevTools.d.ts.map
\ No newline at end of file
diff --git a/node_modules/@dev-plugins/react-navigation/src/useReactNavigationDevTools.ts b/node_modules/@dev-plugins/react-navigation/src/useReactNavigationDevTools.ts
index e51f64d..e069f1e 100644
--- a/node_modules/@dev-plugins/react-navigation/src/useReactNavigationDevTools.ts
+++ b/node_modules/@dev-plugins/react-navigation/src/useReactNavigationDevTools.ts
@@ -5,7 +5,7 @@ import { useEffect, useRef } from 'react';
 
 import { ReduxExtensionAdapter } from './ReduxExtensionAdapter';
 
-export function useReactNavigationDevTools(ref: React.RefObject<NavigationContainerRef<any>>) {
+export function useReactNavigationDevTools(ref: React.RefObject<NavigationContainerRef<any> | null>) {
   const client = useDevToolsPluginClient('react-navigation');
   const adapterRef = useRef(new ReduxExtensionAdapter());
   // @ts-ignore: Override global

File name: @dev-plugins+react-navigation+0.3.1.patch

[rhinck]

Also experiencing this issue on Expo Router v5

[Bonitoflakes]

The updated patch, using pnpm patch

diff --git a/build/useReactNavigationDevTools.d.ts b/build/useReactNavigationDevTools.d.ts
index bec27df48a4f9edcfa858890039a53f96a278681..b2112f0e2b9eadfff6934755a91fb523f6fdab3e 100644
--- a/build/useReactNavigationDevTools.d.ts
+++ b/build/useReactNavigationDevTools.d.ts
@@ -1,3 +1,3 @@

-import type { NavigationContainerRef } from '@react-navigation/core';
-export declare function useReactNavigationDevTools(ref: React.RefObject<NavigationContainerRef>): void;
+import type { NavigationContainerRef, NavigationContainerRefWithCurrent } from '@react-navigation/core';
+export declare function useReactNavigationDevTools(ref: NavigationContainerRefWithCurrent<ReactNavigation.RootParamList>):

void;
//# sourceMappingURL=useReactNavigationDevTools.d.ts.map
\ No newline at end of file
diff --git a/src/useReactNavigationDevTools.ts b/src/useReactNavigationDevTools.ts
index e51f64dee9f18d8af399ba8b08321ccdb0b8bd05..ea12ae5360ce2b2ca3773ec94ec581d93dc81be0 100644
--- a/src/useReactNavigationDevTools.ts
+++ b/src/useReactNavigationDevTools.ts
@@ -1,11 +1,11 @@

-import type { NavigationContainerRef } from '@react-navigation/core';
+import type { NavigationContainerRefWithCurrent} from '@react-navigation/core';

import { useReduxDevToolsExtension } from '@react-navigation/devtools';
import { useDevToolsPluginClient, type EventSubscription } from 'expo/devtools';
import { useEffect, useRef } from 'react';

import { ReduxExtensionAdapter } from './ReduxExtensionAdapter';

-export function useReactNavigationDevTools(ref: React.RefObject<NavigationContainerRef>) {
+export function useReactNavigationDevTools(ref: NavigationContainerRefWithCurrent<ReactNavigation.RootParamList>) {

const client = useDevToolsPluginClient('react-navigation');
const adapterRef = useRef(new ReduxExtensionAdapter());
// @ts-ignore: Override global