I'm looking to dismiss the keyboard when the user clicks on anywhere outside the keyboard or the input. The following code works fine:
<ScrollView
keyboardShouldPersistTaps='handled'
contentContainerStyle={{ flex: 1 }}
>
<View style={styles.inputContainer}>
<TextInput
placeholder="Search Term"
style={styles.input}
onChangeText={setSearch}
value={search}
returnKeyType="search"
onSubmitEditing={handleSubmit}
/>
</View>
</ScrollView>
The styling is pretty standard:
inputContainer: {
position: 'absolute',
top: stackHeaderHeight + 10,
height: height * .1,
width: '100%',
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
},
But, when I introduce the map, react-native-maps
in this case, the keyboard dismiss doesn't work. Manipulating zIndex
of the ScrollView
doesn't make a difference.
<ScrollView
keyboardShouldPersistTaps='handled'
contentContainerStyle={{ flex: 1 }}
>
<View style={styles.inputContainer}>
<TextInput
placeholder="Search Term"
style={styles.input}
onChangeText={setSearch}
value={search}
returnKeyType="search"
onSubmitEditing={handleSubmit}
/>
</View>
<MapView
style={StyleSheet.absoluteFillObject}
region={region}
onRegionChangeComplete={onRegionChangeComplete}
ref={mapviewRef}
showsUserLocation={true}
>
// markers and callouts
</MapView>
</ ScrollView>
I've tried wrapping the entire component with <TouchableWithoutFeedback style={styles.container} onPress={Keyboard.dismiss}>
, but doesn't make a difference.