Hide keyboard in react-native
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!
This just got updated and documented! No more hidden tricks.
import { Keyboard } from 'react-native'// Hide that keyboard!Keyboard.dismiss()
use this for custom dismissal
var dismissKeyboard = require('dismissKeyboard');var TestView = React.createClass({ render: function(){ return ( <TouchableWithoutFeedback onPress={dismissKeyboard}> <View /> </TouchableWithoutFeedback> ) }})