Open slavko-lukic opened 1 year ago
The versions mentioned in the issue for the following packages differ from the latest versions on npm:
@react-navigation/bottom-tabs
(found: 6.5.7
, latest: 6.5.8
)@react-navigation/native
(found: 6.1.6
, latest: 6.1.7
)Can you verify that the issue still exists after upgrading to the latest versions of these packages?
Hey! Thanks for opening the issue. Seems that this issue is related to react-native-screens
library which is a dependency of React Navigation. Can you also post your issue in this repo so that it's notified to the maintainers of that library? This will help us fix the issue faster since it's upto the maintainers of that library to investigate it.
+1
@slavko-lukic @matous94 Hey! I faced the same issue! Did you found any solution please?
@MohamedKhalidCsd I moved the navigation inside the modal onDismiss callback, to make sure it's unmounted before I navigate away. Something like this:
<Modal
visible={isModalOpened}
onRequestClose={() => {
setIsModalOpened(false)
}}
onDismiss={() => {
navigation.navigate("destination");
}}
>
{content}
</Modal>
@MohamedKhalidCsd I moved the navigation inside the modal onDismiss callback, to make sure it's unmounted before I navigate away. Something like this:
<Modal visible={isModalOpened} onRequestClose={() => { setIsModalOpened(false) }} onDismiss={() => { navigation.navigate("destination"); }} > {content} </Modal>
Thanks for your reply. The crash happened if modal is still left open when navigation stack isAuthenticated Boolean became false. exactly the same issue that @slavko-lukic mentioned.
Yeah, basically you gotta change the logic a bit just to make sure that you close modal before navigating away, didn't find proper solution yet.
instead of using Modal from react native or react-native-modal which crash the app both, you can use just navigation screen with options like this or similar:
headerShown: false, animation: 'fade', presentation: 'containedTransparentModal',
, add any styles in this screen and instead of modal hide use goBack(). Works for me perfect.
That sounds like it should work properly, I'll make sure to try that should I run into same problem again.
Current behavior
I am following the suggestions from React Navigation docs on how to implement auth flow. This is how my code looks like.
In one of my app screens, I have modal shown where user can logout, when user logs out, isAuthenticated will be set to false and app screens will be removed from stack. However, app crashes if modal is still left open when I call logout function. If I do it when modal is closed, it works. I am using standard modal from react-native.
Expected behavior
Modal should be removed when screen is removed from stack.
Reproduction
https://www.typescriptlang.org/play?ssl=15&ssc=3&pln=1&pc=1#code/MYewdgzgLgBASiEUDKUCGwDWMC8MAUAlLgHwwDeAUDDKJLAJYQCCArlABYCmYUDwaKFwAmuGKwhc2nIgG5K1GACcuUVkrAFFNADyoMmAHQA5NADcGAc0EglJbTQowAhE2nde-QSJgB+LY6BMHroWIbIwCo8MGBoALZcOOQA5GjsHMkAvrQgcQAO4DxQSe4RUWDZAPT2QTDEAFwBtcH6YQDiSiCseTHmVoIM4ADSXACeSW7pRV5Cov4ARBJcSvMwjfOWrFzQ85k1zYGVlTBI3EowaHk9EJFcPBAOgTqVrUYdXXn7gYSZDs+vJj61igtn2hHkmVkQA
Platform
Packages
Environment
I am not using new architecture.
"@react-navigation/bottom-tabs": "^6.5.7", "@react-navigation/native": "^6.1.6", "@react-navigation/native-stack": "^6.9.12", "react-native": "0.71.7",