RemoveEventListener error in react-native-navigation@4

[gopikrishnacse55]

Current behavior

I have used react-navigation: 4.4.4 in my project for the last 5 years.
We maintained the navigation structure in 4.4.4 because of more screens.
I upgraded my project to 0.73.2 and got this error.
Click on tab screen and go back to previous screen getting this error.
_reactNative.Linking.removeEventListener is not a function (it is undefined)

Expected behavior

I expect this error will be resolved.

Simulator.Screen.Recording.-.iPhone.15.Pro.Max.-.2024-04-21.at.00.10.41.mp4

Reproduction

https://github.com/gopikrishnacse55/NavigationExample

Platform

• Android
• iOS
• Web
• Windows
• MacOS

Packages

• @react-navigation/bottom-tabs
• @react-navigation/drawer
• @react-navigation/material-top-tabs
• @react-navigation/stack
• @react-navigation/native-stack
• react-native-tab-view

Environment

"@react-native-community/masked-view": "^0.1.11",
"react": "18.2.0",
"react-native": "0.73.7",
"react-native-gesture-handler": "^1.10.3",
"react-native-reanimated": "^1.13.4",
"react-native-safe-area-context": "^3.3.2",
"react-native-screens": "^2.18.1",
"react-native-tab-view": "^2.16.0",
"react-navigation": "^4.4.4",
"react-navigation-drawer": "^2.7.2",
"react-navigation-stack": "^2.10.4",
"react-navigation-tabs": "^2.11.2"

[gopikrishnacse55]

react-navigation: 4.4.4.
Above version is more navigation dependency in my project.

[gkasireddy202]

Couldn't find version numbers for the following packages in the issue:

• @react-navigation/native

Can you update the issue to include version numbers for those packages? The version numbers must match the format 1.2.3.

The versions mentioned in the issue for the following packages differ from the latest versions on npm:

• react-native-tab-view (found: 2.16.0, latest: 3.5.2)

Can you verify that the issue still exists after upgrading to the latest versions of these packages?

We will check it by upgrading react-native-tab-view upgrading to 3.5.2

[gkasireddy202]

We upgraded to react-native-tab-view:3.5.2 and the issue is still not resolved.

[raajnadar]

P.S. => After this version https://reactnative.dev/docs/0.70/appstate#removeeventlistener the listener is removed

You guys are using the old package

OLD => https://www.npmjs.com/package/react-navigation

NEW => https://www.npmjs.com/package/@react-navigation/native

All the new packages are under @react-navigation/*

[gkasireddy202]

You guys are using the old package

OLD => https://www.npmjs.com/package/react-navigation

NEW => https://www.npmjs.com/package/@react-navigation/native

All the new packages are under @react-navigation/*

Old package is working in react-native 0.68.7.Any update to fix this bug?
We have 20 to 30 screens in my project using this react-navigation@4.

[raajnadar]

That package is deprecated and will not be maintained, you have 2 choices either upgrade the navigation to v5 (v6 has very few breaking changes) version or use the old React Native version

[raajnadar]

Also, you guys can try the expo router which will make the upgrade process easier, the expo router package will handle the heavy lifting of react-navigation configuration.

[gkasireddy202]

Also, you guys can try the expo router which will make the upgrade process easier, the expo router package will handle the heavy lifting of react-navigation configuration.

@raajnadar - Thanks for your reply.
We have more than 25 screens to upgrade the navigation 6.Any possible to fix this issue by the core team?

[raajnadar]

I don't think the core team will fix it, it is a breaking change

You can get the code of the react-navigation v4 here https://github.com/react-navigation/react-navigation/tree/4.x

You can change the listener here and add it to the patch package for your use case

react-navigation/packages/native/src/useLinking.native.tsx

Lines 43 to 45 in d0abdee

	// Storing this in a local variable stops Jest from complaining about import after teardown
	// @ts-expect-error: removeEventListener is not present in newer RN versions
	const removeEventListener = Linking.removeEventListener?.bind(Linking);

[gkasireddy202]

I don't think the core team will fix it, it is a breaking change

You can get the code of the react-navigation v4 here https://github.com/react-navigation/react-navigation/tree/4.x

You can change the listener here and add it to the patch package for your use case

react-navigation/packages/native/src/useLinking.native.tsx

Lines 43 to 45 in d0abdee

	// Storing this in a local variable stops Jest from complaining about import after teardown
	// @ts-expect-error: removeEventListener is not present in newer RN versions
	const removeEventListener = Linking.removeEventListener?.bind(Linking);

@raajnadar - Thanks for your help.
Can you please tell me how to add above steps in my project?

[gkasireddy202]

We are using react-navigation:4.4.4 in my project.

[gkasireddy202]

Hi Team,

We have successfully upgraded my project from react-native:0.68.7 to 0.73.2.
Everything is working fine except this issue.
Can you please update on this issue?

[radko93]

@gkasireddy202 unlikely react navigation 4 will be updated at this point. You are on your own with this.

[gkasireddy202]

unlikely react navigation 4 will be updated at this point. You are on your own with this.

@radko93 - How can i resolve this issue in react navigation 4?

[raajnadar]

@gkasireddy202 I gave you the idea, the removeEventListener is deprecated and removed from the latest version you can go to the v4 branch to check the usage, go to your projects node_modules & make the changes and use the patch package, to persist the change.

[gkasireddy202]

@raajnadar - I have already checked it.There are no folder packages in node_modules/react-navigation in my project

[raajnadar]

This is a mono repo, so all the packages under that folder will be deployed to npm as separate folders.

Check you will have @react-navigation folder in your node-modules and native inside it.

[gkasireddy202]

The folder location as I mentioned in the screenshot right?

[gkasireddy202]

I added the types.tsx,useLinking.native.tsx,extractPathFromURL.tsx file in react-navigation folder.
Still issue is not resolved.

[gkasireddy202]

My team members and I saw below information about navigation 4 in the documentation 10 days ago.

[gkasireddy202]

This issue is moved to discussion from react-navigation issues.
Would you have any thoughts on fixing this issue? We need to resolve this issue temporarily later we will migrate to Navigation 6.

[raajnadar]

I suggest you guys migrate your codebase because the version of gesture handler and reanimated is low, and you will face many issues by updating to the latest React Native.

[raajnadar]

You guys can try to apply this change to fix your issue temporarily

08d6e14

P.S. - After you make the changes in the node_modules you can use the patch package. https://www.npmjs.com/package/patch-package

[gkasireddy202]

@raajnadar - Thanks.

[gkasireddy202]

@raajnadar - I create the files types.tsx,useLinking.native.tsx,extractPathFromURL.tsx under node_modules/@react-navigation/src
and copied and paste the code from Github repo.Getting same error.We need to import any files in createAppContainer.js?
https://github.com/react-navigation/react-navigation/tree/d0abdee67f5db8cf39112af535846ffededfb21d/packages/native/src

[raajnadar]

This will be my last message on this topic, if that didn’t work please go ahead with the upgrade process to v5

When you make the changes on node_mobules make sure you kill the react native metro server, clear the metro cache and then start the process again before yarn start --reset-cache & then test the changes.

Also between each yarn install the change will be overridden.

P.S. - And simple copy-pasting of any code won't work, add the correct code.

[gkasireddy202]

@raajnadar - Thanks for your effort.
We are decide to migrate from v4 to v6.