KeyboardAwareScrollView behaviour with Modal as children Component

[nubilfi]

Hi,

I have a question about using KeyboardAwareScrollView. So, I have a Layout.js that contains 3 different components, I put the TextInput component inside a Modal when it's open the keyboard up, the Layout styles shrinking by themselves. Here is my code:

// Layout.js
=========================================================
<KeyboardAwareScrollView contentContainerStyle={{ flexGrow: 1 }}>
      <Header isLoading={isLoading} isNewUser={isNewUser} userName={userName} />

      <View style={[{ flex: 1 }, styles.layout]}>
        {items.map((val) => (
            <View style={[{ alignItems: 'center' }, val.styles.container]}>
                <View style={{ flex: 1, flexDirection: 'column', paddingVertical: 12 }}>
                    <Text style={val.styles.text}>{val.type.toUpperCase()}</Text>
                    <View style={{ flexDirection: 'row' }}>
                    <Text style={val.styles.desc}>{val.desc}</Text>
                    <Text style={[{ marginLeft: 15 }, val.styles.desc]}>Level 0</Text>
                    </View>
                </View>
            </View>
        ))}

        {isNewUser && (
          <FormPopup
            show
            type="greeting"
            user={userInput}
            userInput={setUserInput}
            newUserHandler={setIsNewUser}
            submitUserHandler={submitHandler}
            isAlertActive={showAlertText}
            alertHandler={setShowAlertText}
          />
        )}
      </View>
</KeyboardAwareScrollView>

// FormPopup.js
=========================================================
<Modal animationType="slide" transparent visible={show}>
    <View style={styles.centeredView}>
        <View style={styles.modalView}>
            <Text style={styles.modalText}>Hi there!</Text>
            <TextInput
                placeholder="Insert your name"
                style={[{ borderColor: !user ? '#f62425' : '#000' }, styles.TextInputStyle]}
                value={user}
                onChangeText={userInput}
                maxLength={10}
            />

            {isAlertActive && (
                <Text style={{ paddingTop: 20, fontFamily: 'Carme' }}>Please insert your name.</Text>
            )}

            <TouchableWithoutFeedback onPress={submitHandler}>
            <View style={styles.centeredButton}>
                <Text style={styles.buttonText}>Save</Text>
            </View>
            </TouchableWithoutFeedback>
        </View>
    </View>
</Modal>

[Woverlin]

same question

[Goaty89]

Same issue here.

[ad-ejami]

Same issue.

[jduhking]

any solution?