Keyboard causes modal to disappear React-Native

user_1170429 0
Viewed 3694

The workflow of what I am trying to do is the following:

    1. User clicks on hamburger icon and gets a dropdown.
    1. User clicks on rename.
    1. A modal appears with a TextInput and two buttons to accept and cancel.

The problem I am facing is between 2/3. As I click on rename, the modal appears momentarily, but then disappears as the keyboard shows up. Even though I cannot see the modal, my keystrokes still register to the TextInput. When I close the keyboard, the modal appears again.

Here is my code:

<Modal
    animationType="slide"
    transparent={true}
    visible={renaming}
    onRequestClose={() => {
        Alert.alert('Modal has been closed.');
    }}>
    <KeyboardAvoidingView style={styles.modalMask} behavior="padding">
        <View style={styles.modalContainer}>
            {unitType === 'file' ?
                <Text style={styles.modalHeader}>Rename clip:</Text>
                    :
                <Text style={styles.modalHeader}>Rename folder:</Text>
            }

            <TextInput
                style={styles.modalInput}
                onChangeText={(newTitle) => this.setState({title: newTitle})}
                defaultValue={'tits'}
                autoFocus={true}
                selectTextOnFocus={true}
                keyboardAppearance={'dark'}
                maxLength={30}
            />

            <View style={styles.modalOptions}>
                <TouchableHighlight
                    onPress={() => {
                        this.handleCloseModal();
                    }}
                    style={styles.modalOption}
                >
                    <Text>CANCEL</Text>
                </TouchableHighlight>

                <TouchableHighlight
                    onPress={() => {
                        this.handleRename(id, unitType)}
                    }
                    style={[styles.modalOption, styles.renameOption]}
                >
                    <Text style={{color: 'white'}}>RENAME</Text>
                </TouchableHighlight>
            </View>

        </View>
    </KeyboardAvoidingView>
</Modal>
react-native view javascript
1 Answers

As far as I can see, the problem could be because KeyboardAvoidingView is pushing the Modal up enough to move it away from viewport.

Try passing a negative value to keyboardVerticalOffset as a prop to KeyboardAvoidingView. This prop controls how far up the Modal gets pushed when keyboard comes up.

Example: 

<KeyboardAvoidingView style={styles.modalMask} behavior="padding" keyboardVerticalOffset= {-200}>
  <View>
    Your view
  </View>
</KeyboardAvoidingView>
user_61327350
Related