The problem with keyboard not dismissing gets more severe if you have keyboardType="numeric"
, as there is no way to dismiss it.
Replacing View with ScrollView is not a correct solution, as if you have multiple textInput
s or button
s, tapping on them while the keyboard is up will only dismiss the keyboard.
Correct way is to encapsulate View with TouchableWithoutFeedback
and calling Keyboard.dismiss()
EDIT: You can now use ScrollView
with keyboardShouldPersistTaps="handled"
to only dismiss the keyboard when the tap is not handled by the children (ie. tapping on other textInputs or buttons)
If you have
<View style={{flex: 1}}>
<TextInput keyboardType="numeric"/>
</View>
Change it to
<ScrollView contentContainerStyle={{flexGrow: 1}}
keyboardShouldPersistTaps="handled"
>
<TextInput keyboardType="numeric"/>
</ScrollView>
or
import {Keyboard} from 'react-native'
<TouchableWithoutFeedback onPress={Keyboard.dismiss} accessible={false}>
<View style={{flex: 1}}>
<TextInput keyboardType="numeric"/>
</View>
</TouchableWithoutFeedback>
EDIT: You can also create a Higher Order Component to dismiss the keyboard.
import React from 'react';
import { TouchableWithoutFeedback, Keyboard, View } from 'react-native';
const DismissKeyboardHOC = (Comp) => {
return ({ children, ...props }) => (
<TouchableWithoutFeedback onPress={Keyboard.dismiss} accessible={false}>
<Comp {...props}>
{children}
</Comp>
</TouchableWithoutFeedback>
);
};
const DismissKeyboardView = DismissKeyboardHOC(View)
Simply use it like this
...
render() {
<DismissKeyboardView>
<TextInput keyboardType="numeric"/>
</DismissKeyboardView>
}
NOTE: the accessible={false}
is required to make the input form continue to be accessible through VoiceOver. Visually impaired people will thank you!