react-nativereact-native-modal

Prevent keyboard dismiss React Native inside Modal


I have a textinput at the bottom of a screen, that expands into a larger section with some options when pressed. bottomHeight and height are increased when the keyboard opens.

When one of these pre-defined tags in the extra container is pressed, I do not want to close the keyboard but I can't make it work and could use some help.

I have wrapped the textinput in a scrollview to try and use keyboardShouldPersistTaps and keyboardDismissMode as suggested elsewhere but its not working.

There are no parent ScrollViews, ListViews or FlatLists to update however this component is inside Modal which is wrapped by SafeAreaView

<KeyboardAvoidingView style={{ position: 'absolute', bottom: this.props.bottomHeight, left: 0, right: 0, height: this.props.height }}>

// not sure if I need this inner scrollview, ideally it should just be a view
    <ScrollView style={this._computeBottomContainer()} keyboardShouldPersistTaps="always" keyboardDismissMode="on-drag">
        <TextInput
            style={styles.filter}
            placeholder="Type to filter tags"
            onChangeText={(text) => this.props.suggestTags(text)}
            selectionColor="black"
            blurOnSubmit={false}
        />

        { this.props.keyboardOpen &&
            <View style={styles.tagsOuterContainer}>
                <Text style={styles.suggest}>Suggested tags: {this.props.suggestedTags.length}</Text>

                <View style={styles.tagsInnerContainer}>
                    <FlatList
                        data={this.props.suggestedTags}
                        horizontal={true}
                        renderItem={this.renderTag}
                        keyExtractor={( {item}, index) => item + index}
                        keyboardShouldPersistTaps='always'
                        keyboardDismissMode='on-drag'
                    />
                </View>
            </View>
        }
    </ScrollView>
</KeyboardAvoidingView>

Solution

  • Towards the root of my app, I have a <Swiper /> element which is basically a ScrollView. Adding keyboardShouldPersistTaps="always" keyboardDismissMode="on-drag" to the Swiper as props solved my issue