[🐛] Navigating to react navigation modal after image picker often causes navigation to break

[benzman81]

Description

We use react navigation with a stack navigator containing modal screens. Now, when we use the image picker we want to navigate to the modal screen after the image is selected. The problem is, that this often does not work and then all modals in react navigation stop working. If you surround the navigation call after the image picker using a setTimeout, then the issue reduces but is still there, just less likely. No matter what time we set. We also tried to call setTimeout recursively multiple times, but nothing gets it back to work.
We tried this with react-native-image-crop-picker and react-native-document-picker, but this issue does not happen there. At least not in all our tries.

How to repeat issue and example

• Start the attached app
• Go to Details
• Tap "Open Modal" and dismiss it to see it works standalone
• Tap "Open Image Library Picker" and choose an image
• Now either the modal does not appear right away and tapping "Open Modal" also does not open the modal anymore, or the modal appears and you can dismiss it. In the latter case just repeat the process of tapping "Open Image Library Picker" and selecting a different image and after some tries the modal should not appear anymore and "Open Modal" is also broken

Since I also included react-native-image-crop-picker and react-native-document-picker in the sample, you can also check the process using their library that don't show this issue.

Solution

The navigation should be working 100% and the modal should be shown.

Additional Information

• Image Picker version: 7.1.0
• React Native version: 0.73.4 (NOT using new architecture)
• Platform: iOS, Android never tested
• Development Operating System: MacOS Ventura 13.6.3
• Dev tools: Xcode 15.2,, iOS 17.2, VSCode 1.86.1

AwesomeProject.zip

[tmoran-stenoa]

I am having the same issue. I can confirm that this happens with launchImageLibrary on iOS. For some reason, if you display an alert right before calling it, say with Alert.alert("hi"), then this fixes the problem

[tmoran-stenoa]

Strangely, this did not happen in the previous version of my app, despite me not having changed anything relevant to this particular interaction. My suspicion is that it's some sort of race condition or weird unintended interaction between react-navigation and react-native-image-picker. It might be due to some internal behaviour of react-navigation, I have no idea.