[iOS] The document picker modal closes after opening

[segicm]

Bug report

Summary

The document picker opens and then closes the next second. If you try to open it again, it throws the error:
Error: Warning: previous promise did not settle and was overwritten. You've called "pick" while "pick" was already in progress and has not been completed yet.

Reproducible sample code

const result = await DocumentPicker.pickSingle({ allowMultiSelection: false });

Steps to reproduce

1. Just call the picker method:
   const result = await DocumentPicker.pickSingle({ allowMultiSelection: false });

Describe what you expected to happen:

It should stay opened until some action closes it.

I managed to take a screenshot before the modal closes:

Environment info

npx react-native info output:

System:
    OS: macOS 13.2.1
    CPU: (10) arm64 Apple M1 Pro
    Memory: 121.94 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.20.0 - /opt/homebrew/opt/node@16/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 8.19.4 - /opt/homebrew/opt/node@16/bin/npm
    Watchman: 2023.03.27.00 - /opt/homebrew/bin/watchman
  Managers:
    CocoaPods: 1.12.0 - /opt/homebrew/bin/pod
  SDKs:
    iOS SDK:
      Platforms: DriverKit 22.4, iOS 16.4, macOS 13.3, tvOS 16.4, watchOS 9.4
    Android SDK: Not Found
  IDEs:
    Android Studio: 2022.1 AI-221.6008.13.2211.9619390
    Xcode: 14.3.1/14E300c - /usr/bin/xcodebuild
  Languages:
    Java: 11.0.15 - /usr/bin/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: 18.2.0 => 18.2.0 
    react-native: 0.71.8 => 0.71.8 
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

Library version: 9.0.1
iOS version: 16.4

[segicm]

For those facing the same issue, please ensure that you do not invoke the picker from a modal, bottom sheet, or any other modal-based component. Resolving this problem involves either waiting for the modal to close before invoking the picker or completely avoiding the use of modals when making the picker call.

[jlocke2]

@vonovak - I was experiencing this issue, and the above recommendation fixed it for me.

I noticed that this scenario was reported in various issues without a reproduction case or solution, would you be interested in adding this detail to the README? I think it could save other developers significant time trying to troubleshoot in the future.

[sierra-alpha]

@segicm or @jlocke2 were you by chance launching the document picker from a <ModalSelector> provided by react-native-modal-selector?

I am seeing the same issue and I am using react-native-modal-selector to pop a camera/gallery (react-native-image-picker) and document picker (this package). But perhaps this behaviour is common for any Modal.

I did notice some mentions over in react-native-modal-selector that may be related

• iOS onChange called twice peacechen/react-native-modal-selector#140
• Delayed onChange peacechen/react-native-modal-selector#114

In particular 114 as at a total guess what I think is happening is that this document picker is getting launched before the underlying ModalSelector is dismissed and then when it is dismissed it's also dismissing this document picker.

However we do get desired behaviour with the react-native-image-picker suggesting that it's potentially possible to launch from a ModalSelector and not dismiss the desired overlay modal immediately (just guessing here as I haven't deep dived the code yet). Also when I make sure that the underlying ModalSelector is either completely dismissed before this document picker launches, or is dismissed entirely after this document picker is finished with, then I don't experience the OP behaviour where the document picker is dismissed almost immediately after calling it.

I'll dive a bit deeper on it though.