Modal display bug after mounting keyboard

[Jul1enF]

Describe the bug

I'm having the same problem as in this topic : #659

If the keyboard is mounted, then dismissed, when next i want to display a modal, this one bugs. Its position changes unless i put a position absolute directly to the style of the modal. But more important, i'm unable to interact anymore with the pressable on it. It is completely stuck, only pressing the Back Button works

This problem doesn't happen at all on IOS or if i use a KeyboardAvoidingView and a ScrollView instead of a KeyboardAwareScrollView on android.

I tried with the modal component of react native, or by setting enabled to false for the KeyboardAwareScrollView when pressing to display the modal but without success.

Code snippet

import { View, TextInput, Text, StyleSheet, KeyboardAvoidingView, ScrollView, Platform, TouchableOpacity } from "react-native";
import { RPH, RPW } from "./modules/dimensions"
import { LinearGradient } from "expo-linear-gradient";
import { useState, useEffect, useRef } from "react";
import Modal from "react-native-modal"
import { KeyboardProvider } from "react-native-keyboard-controller";
import { KeyboardAwareScrollView, KeyboardToolbar } from "react-native-keyboard-controller";


export default function UserInformations() {


    const [firstname, setFirstname] = useState('')
    const [name, setName] = useState('')
    const [email, setEmail] = useState('')

    const [error, setError] = useState('')
    const [modal1Visible, setModal1Visible] = useState(false)


    return (<>
        <KeyboardProvider>
        <KeyboardAwareScrollView
            style={{ flex: 1 }}
            contentContainerStyle={[styles.contentBody]}
            bottomOffset={RPH(14)}
        >


            {/* <KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : 'height'} keyboardVerticalOffset={RPH(14.5)} style={styles.body}>
            <ScrollView style={styles.body} contentContainerStyle={styles.contentBody}  > */}

            <View style={styles.topContainer}>
                <Text style={styles.title}>My informations</Text>
                <LinearGradient
                    colors={['#9dcb00', '#045400']}
                    locations={[0.05, 1]}
                    start={{ x: 0, y: 0.5 }}
                    end={{ x: 1, y: 0.5 }}
                    style={styles.gradientLine}
                >
                </LinearGradient>
            </View>

            <Text style={styles.text1}>
                Change my firstname :
            </Text>
            <TextInput style={styles.input}
                onChangeText={(value) => {
                    setFirstname(value)
                    setError('')
                }}
                value={firstname}
                placeholder="Firstname"
                placeholderTextColor="#fbfff790"
                maxLength={28}>
            </TextInput>


            <Text style={styles.text1}>
                Changer my name :
            </Text>
            <TextInput style={styles.input}
                onChangeText={(value) => {
                    setName(value)
                    setError('')
                }}
                value={name}
                placeholder="Name"
                placeholderTextColor="#fbfff790"
                maxLength={28}>
            </TextInput>


            <Text style={styles.text1}>
                Change my email :
            </Text>
            <TextInput style={[styles.input, { marginBottom: 40 }]}
                onChangeText={(value) => {
                    setEmail(value)
                    setError('')
                }}
                value={email}
                keyboardType='email-address'
                autoCapitalize='none'
                placeholder="Email"
                placeholderTextColor="#fbfff790"
                maxLength={28}>
            </TextInput>

            <TouchableOpacity style={styles.btnTouchable} activeOpacity={0.8} onPress={() => setModal1Visible(true)}>
                <LinearGradient
                    colors={['#9dcb00', '#045400']}
                    locations={[0.05, 1]}
                    start={{ x: 0, y: 0.5 }}
                    end={{ x: 1, y: 0.5 }}
                    style={styles.btnGradientContainer}
                >
                    <Text style={styles.text2}>Register</Text>
                </LinearGradient>
            </TouchableOpacity>


            <Modal
                isVisible={modal1Visible}
                style={styles.modal}
                backdropColor="rgba(0,0,0,0.9)"
                animationIn="slideInDown"
                animationOut="slideOutUp"
                statusBarTranslucent={true}
                pointerEvents="auto"
                onBackButtonPress={() => setModal1Visible(!modal1Visible)}
                onBackdropPress={() => setModal1Visible(!modal1Visible)}
            >
                <View style={styles.modalBody}>
                    <Text style={styles.text3}>Are you sure ?</Text>
                    <LinearGradient
                        colors={['#9dcb00', '#045400']}
                        locations={[0.05, 1]}
                        start={{ x: 0, y: 0.5 }}
                        end={{ x: 1, y: 0.5 }}
                        style={styles.gradientLine2}
                    >
                    </LinearGradient>
                    <View style={styles.row1}>
                        <TouchableOpacity style={styles.btnTouchable} activeOpacity={0.8} onPress={() => setModal1Visible(false)}>
                            <LinearGradient
                                colors={['#9dcb00', '#045400']}
                                locations={[0.05, 1]}
                                start={{ x: 0, y: 0.5 }}
                                end={{ x: 1, y: 0.5 }}
                                style={styles.btnGradientContainer}
                            >
                                <Text style={styles.text2}>Cancel</Text>
                            </LinearGradient>
                        </TouchableOpacity>

                        <TouchableOpacity style={styles.btnTouchable} activeOpacity={0.8} onPress={() => console.log("Register")}>
                            <LinearGradient
                                colors={['#9dcb00', '#045400']}
                                locations={[0.05, 1]}
                                start={{ x: 0, y: 0.5 }}
                                end={{ x: 1, y: 0.5 }}
                                style={styles.btnGradientContainer}
                            >
                                <Text style={styles.text2}>Register</Text>
                            </LinearGradient>
                        </TouchableOpacity>
                    </View>
                </View>
            </Modal>



            {/* </ScrollView>
        </KeyboardAvoidingView> */}


        </KeyboardAwareScrollView>
        </KeyboardProvider>

    </>
    )
}


const styles = StyleSheet.create({
    body: {
        flex: 1,
        backgroundColor: "#f9fff4",
    },
    contentBody: {
        paddingLeft: RPW(4),
        paddingRight: RPW(4),
        paddingBottom: RPW(6),
        paddingTop: RPW(5),
        alignItems: "center",
        backgroundColor: "#f9fff4",
    },
    topContainer: {
        alignItems: "flex-start",
        width: "100%",
        marginBottom: 25,
    },
    title: {
        color: "#19290a",
        fontSize: 24,
        fontWeight: "450",
        marginBottom: 9,
        marginLeft: 5
    },
    gradientLine: {
        width: "95%",
        height: 4,
        marginBottom: 15,
    },
    text1: {
        color: "#19290a",
        fontSize: RPW(5),
        fontWeight: "350",
        marginBottom: 13
    },
    input: {
        width: "100%",
        backgroundColor: "#2e6017",
        color: "white",
        borderRadius: 5,
        marginBottom: 25,
        paddingLeft: 8,
        fontSize: RPW(5.3),
        paddingBottom: 7,
        paddingTop: 7,
    },
    btnTouchable: {
        height: RPW(12),
        marginTop: 10,
    },
    btnGradientContainer: {
        flex: 1,
        borderRadius: 10,
        alignItems: "center",
        justifyContent: "center",
        paddingLeft: RPW(5),
        paddingRight: RPW(5),
        minWidth: RPW(34)
    },
    text2: {
        color: "white",
        fontSize: RPW(5.4),
        fontWeight: "500",
        textAlign: "center"
    },
    text3: {
        color: "#19290a",
        fontSize: RPW(5.4),
        fontWeight: "500",
        textAlign: "center"
    },
    modal: {
        alignItems: "center",
        justifyContent : "center",
       flex : 1,
        position : "absolute",
        top : RPH(0),
        left : RPW(0)
    },
    modalBody: {
        height: RPH(35),
        width: RPW(90),
        borderRadius: 10,
        paddingTop: RPH(5),
        paddingBottom: RPH(5),
        paddingLeft: RPW(4),
        paddingRight: RPW(4),
        backgroundColor: "#e6eedd",
        // position: "absolute",
        // bottom: RPH(20),
        justifyContent: "space-between",
        alignItems: "center"
    },
    gradientLine2: {
        width: "90%",
        height: 4,
    },
    row1: {
        flexDirection: "row",
        width: "100%",
        alignItems: "center",
        justifyContent: "space-between",
        marginBottom: 8,
    },
})

Repo for reproducing

https://github.com/Jul1enF/testModalKeyboardAware.git

To Reproduce
Steps to reproduce the behavior:

• Press on an input to make the keyboard mount
• Press on the button register to make the modal appear
• Try to press on the cancel button

Expected behavior
The modal goes away, the touchable opacity can be pressed. You'll see that if you don't mount the keyboard, the modal acts correctly.

[Jul1enF]

Hi @kirillzyusko and thanks for watching.

Sorry if i wasn't very clear, the described problem only occurs on android. I'm referring to the label you added.

[kirillzyusko]

Okay, it looks like the problem is coming from this 🤔

<Reanimated.View style={view} />

Problem might be related to software-mansion/react-native-reanimated#5567 - I'll try to check tomorrow!

[Jul1enF]

Thanks a lot for trying to fix the problem !

[Jul1enF]

Problem solved with your latest released ! Thanks a lot !!!

[kirillzyusko]

Problem solved with your latest released ! Thanks a lot !!!

Oh, wow, didn't expect that!

Was it fixed with 1.15.0 or 1.15.2? And did you try explicitly a version like 1.15 and it wasn't working and then you tried 1.15.2 and it started to work?

Just trying understand what exactly fixed the problem 😊

[Jul1enF]

Sorry i didn't keep enough traces of what i did. Now when i'm downgrading, even to 14, it stills work, even after clearing the cache. Maybe a expo update fixed i instead.

[kirillzyusko]

Ah, okay, thank you for the information anyway!

I'll close the issue, but if you get any new issues - feel free to open new issues! 🙌

[Jul1enF]

Hi

Sorry i don't know how i could have been mistaken like that, but the problem is in fact still there.

I'm deeply sorry for the false joy, i was dealing with too much differents projects.

So the modal still bugs after the appearance of the keyboard with KeyboardAwareScrollView. Only on android.

[kirillzyusko]

Okay, let me re-open the issue then 🙂