PHPickerViewController view is not in the window hierarchy

[dkr13]

I'm using react-native-image-picker to let the user select an image from the gallery. When I try to use the returned value with the PhotoEditor, I get the following error message in Xcode:

[Presentation] Attempt to present <iOSPhotoEditor.PhotoEditorViewController: 0x16031bc00> on <PHPickerViewController: 0x175490d20> (from <PHPickerViewController: 0x175490d20>) whose view is not in the window hierarchy.

Here's the code that I use to launch the PhotoEditor:

launchImageLibrary({mediaType: 'photo'}, (response) => {
    if (response.assets?.length !== 1) {
        return;
    }
    response = response.assets[0];
    console.log(response.uri);
    PhotoEditor.Edit({
        path: response.uri,
        stickers: ["thumb_up", "thumb_down"],
        onDone: () => {
            console.log('done!')
        },
    });
).then();

response.uri is the value returned from react-native-image-picker and is similar to the following (which is a path to an image, that exists on my system.

file:///Users/USER/Library/Developer/CoreSimulator/Devices/DBC345C-B6B9-45F0-81C4-108B0082AAA1/data/Containers/Data/Application/A83FCE32-7792-430A-A99E-EAF0A5415C8F/tmp/1CE483F3-B45D-4D46-88FB-654CFADAD9B1.jpg

There is a similar issue from 2019, but the author says it works with react-native-image-picker. Am I correct with the assumption, that react-native-image-picker moves the image to the app sandbox?

Can anybody help me with this problem and know, why PHPickerViewController is not loaded into the hierarchy?

[mmenacer]

Is this issue similar to this one: RCTModalHostViewController
Attempt to present <iOSPhotoEditor.PhotoEditorViewController: 0x104018000> on <RCTModalHostViewController: 0x118682e60> (from <RCTModalHostViewController: 0x118682e60>) whose view is not in the window hierarchy.

Thank you,

[akhilesh-mourya]

Yes @mmenacer this issue is similar to what you posted. I am also facing the same issue.

[mmenacer]

@akhilesh-mourya

I found the issue and a solution for this issue. The issue is only for iOS platform.

The problem is that the app has more than 2 modals open. And if you open the image picker it will be the 3rd modal (on open state).
So to fix the issue. You have to make sure that you closed the 1st modal.
I used in my solution:

const onOpenAssignUsers = useCallback(() => {
        // closes the 1st modal
        setModalOneVisible(false);
        // open the 2nd modal
        setTimeout(
            () => {
                setModalTwoVisible(true);
            },
            // any small number will do, maybe animation duration
            100,
        );
    }, []);

If you can not close it so the solution is to convert all your modals that they are before the react picker modal to a view/screen components.

[harunisik]

Same issue here. It doesn't work with react-native-image-picker. I don't have any modal open. Photo editor opens after a user action but not when called in launchImageLibrary callback as @dkr13 explained.