Modal overlapping ImagePicker (Camera and Camera Roll) iOS

[vcorrea]

Please provide the following:

1. SDK Version:
   “expo”: “^40.0.0”,
2. Platforms(Android/iOS/web/all):
   iOS only
3. Add the appropriate “Tag” based on what Expo library you have a question on.

I’ve created a component to handle images inside a modal and didn’t modify anything in two months.
Since I’ve deleted and reinstalled the Expo Go app on my phone it started to behave really wrong…

The camera roll or camera (depending on what you choose) are opening behind the modal.

I do have two modals overlapping and it wasn’t an issue before.

I’m using “react-native-modal”: “^11.5.6”,

This is how it’s now.

const [isFirstModalVisible, setFirstModalVisible] = useState(false);
    const toggleFirstModal = () => {
        setFirstModalVisible(!isFirstModalVisible);
    };

    const [isModalVisible, setModalVisible] = useState(false);
    const toggleModal = () => {
        setModalVisible(!isModalVisible);
    };
...

const getImageHandler = async () => {
        const hasPermission = await verifyPermissions();
        if (!hasPermission) {
            return;
        }
        if (arrImage.selectedImages.length <= 3) {
            const imageLib = await ImagePicker.launchImageLibraryAsync({
                allowsEditing: false,
                aspect: [16, 9],
                mediaTypes: ImagePicker.MediaTypeOptions.Images,
                base64: true
            });
            if (!imageLib.cancelled) {
                arrImage.selectedImages.push({ immagine: imageLib.base64 });
                setImmaginiCounter(arrImage.selectedImages.length);
            }
        } else {
            Alert.alert(
                ENV.ALERT_WARNING,
                'Numero massimo di immagini raggiunto, per inserirne di nuove è necessario cancellare una di quelle esistenti. ',
                [{ text: 'Ok' }]
            );
        }
        props.onImageTaken(arrImage);
    };
...

<ScrollView>
            <View style={styles.container}>
                <Button text={immaginiCounter > 0 ? '(' + immaginiCounter + ')' : null} icon={'camera'} onPress={toggleFirstModal} buttonStyle={{ minWidth: '55%' }} />                
                <Modal isVisible={isFirstModalVisible}>
                    <SafeAreaView style={{ flex: 1 }}>
                        <View style={styles.modalContainer}>
                            <Icon style={{ alignSelf: 'flex-end' }} onPress={toggleFirstModal} name="ios-close" />
                            .....
                            <Modal style={styles.modalStyle, { flex: 1 }} visible={isModalVisible}>
                                <Container>
                                    ....
                                    {
                                        pickedImage ?
                                            <View ref={snapView} collapsable={false} style={styles.sketchContainer}>
                                                <ImageBackground resizeMode="contain" style={{ flex: 1 }} source={{ uri: `data:image/gif;base64,${pickedImage}` }}>
                                                    <ExpoPixi.Sketch
                                                        ref={sketch}
                                                        style={styles.sketch}
                                                        strokeColor={strokeColor}
                                                        strokeAlpha={1}
                                                        transparent={true}
                                                    />
                                                </ImageBackground>
                                            </View> : null
                                    }
                                </Container>
                            </Modal>
                            <ScrollView showsVerticalScrollIndicator={false} style={{ flex: 1 }}>
                                <View style={{ flexDirection: 'row', justifyContent: 'space-evenly', width: '100%' }}>
                                    <Button onPress={takeImageHandler} icon={'camera'} buttonStyle={{ width: '30%' }} />
                                    <Button onPress={getImageHandler} icon={'md-image'} buttonStyle={{ width: '30%' }} />
                                </View>
                               ......
                            </ScrollView>
                        </View>
                    </SafeAreaView>
                </Modal>
            </View>
        </ScrollView >

Don’t know what happened since it was working before, any suggestions on how to debug it?

Is there a way to force Camera and Camera Roll to overlay everything like it was supposed to?

Thanks!

[rollclub]

The same issue

[rollclub]

I upgraded Expo SDK to 41 and it fixed.

[vcorrea]

I’ll give it a try and update you! Thanks for the tip!