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>
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