search

react-navigation / react-navigation

Routing and navigation for your React Native apps
https://reactnavigation.org
23.3k stars 4.97k forks source link

RemoveEventListener error in react-native-navigation@4 #11950

Closed gopikrishnacse55 closed 3 weeks ago

gopikrishnacse55 commented 4 weeks ago

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. Navigation

https://github.com/react-navigation/react-navigation/assets/25631385/dd7ac865-dcb1-4a4b-89bb-0f41140642cd

Reproduction

https://github.com/gopikrishnacse55/NavigationExample

Platform

Packages

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"

github-actions[bot] commented 4 weeks ago

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

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:

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

gopikrishnacse55 commented 4 weeks ago

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

gkasireddy202 commented 3 weeks ago

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 commented 3 weeks ago

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

raajnadar commented 3 weeks ago

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 commented 3 weeks ago

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 commented 3 weeks ago

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 commented 3 weeks ago

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 commented 3 weeks ago

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 commented 3 weeks ago

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

https://github.com/react-navigation/react-navigation/blob/d0abdee67f5db8cf39112af535846ffededfb21d/packages/native/src/useLinking.native.tsx#L43-L45

gkasireddy202 commented 3 weeks ago

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

https://github.com/react-navigation/react-navigation/blob/d0abdee67f5db8cf39112af535846ffededfb21d/packages/native/src/useLinking.native.tsx#L43-L45

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

gkasireddy202 commented 3 weeks ago

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

Screenshot 2024-04-23 at 3 20 11 PM
gkasireddy202 commented 3 weeks ago

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 commented 3 weeks ago

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

gkasireddy202 commented 3 weeks ago

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 commented 3 weeks ago

@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 commented 3 weeks ago

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

Screenshot 2024-04-23 at 3 20 11 PM
raajnadar commented 3 weeks ago

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 commented 3 weeks ago

The folder location as I mentioned in the screenshot right?

Screenshot 2024-04-25 at 2 48 30 PM
gkasireddy202 commented 3 weeks ago

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

Screenshot 2024-04-25 at 3 05 46 PM
gkasireddy202 commented 3 weeks ago

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

IMG_3369 IMG_3370 IMG_3371 IMG_3372