Hide keyboard in react-native

Question

If I tap onto a textinput  I want to be able to tap somewhere else in order to dismiss the keyboard again  not the return key though   I haven t found the slightest piece of information concerning this in all the tutorials and blog posts that I read  This basic example is still not working for me with react-native 0 4 2 in the Simulator  Couldn t try it on my iPhone yet    lt View style  styles container  gt     lt Text style  styles welcome  gt      Welcome to React Native     lt  Text gt     lt Text style  styles instructions  gt      To get started  edit index ios js    lt  Text gt     lt Text style  styles instructions  gt      Press Cmd R to reload    n       Cmd D or shake for dev menu    lt  Text gt     lt TextInput     style   height  40  borderColor   gray   borderWidth  1       onEndEditing  this clearFocus      gt   lt  View gt

User · Answer

in ScrollView use   keyboardShouldPersistTaps  handled     This will do your job

User · Answer

I m brand new to React  and ran into the exact same issue while making a demo app  If you use the onStartShouldSetResponder prop  described here   you can grab touches on a plain old React View  Curious to hear more experienced React-ers  thoughts on this strategy   if there s a better one  but this is what worked for me   containerTouched event      this refs textInput blur      return false     render        lt View onStartShouldSetResponder  this containerTouched bind this   gt       lt TextInput ref  textInput    gt     lt  View gt      2 things to note here  First  as discussed here  there s not yet a way to end editing of all subviews  so we have to refer to the TextInput directly to blur it  Second  the onStartShouldSetResponder is intercepted by other touchable controls on top of it  So clicking on a TouchableHighlight etc  including another TextInput  within the container view will not trigger the event  However  clicking on an Image within the container view will still dismiss the keyboard

User · Answer

Use ScrollView instead of View and set the keyboardShouldPersistTaps attribute to false    lt ScrollView style  styles container  keyboardShouldPersistTaps  false  gt       lt TextInput         placeholder  Post Title          onChange   event    gt  this updateTitle event nativeEvent text           style  styles default   gt    lt  ScrollView gt

User · Answer

Using keyboardShouldPersistTaps in the ScrollView you can pass in  handled   which deals with the issues that people are saying comes with using the ScrollView  This is what the documentation says about using  handled   the keyboard will not dismiss automatically when the tap was handled by a children   or captured by an ancestor   Here is where it s referenced

User · Answer

There are many ways you could handle this  the answers above don t include returnType as it was not included in react-native that time   1  You can solve it by wrapping your components inside ScrollView  by default ScrollView closes the keyboard if we press somewhere  But incase you want to use ScrollView but disable this effect  you can use pointerEvent prop to scrollView pointerEvents    none    2  If you want to close the keyboard on a button press  You can just use Keyboard from react-native  import   Keyboard   from  react-native  and inside onPress of that button  you can useKeyboard dismiss      3  You can also close the keyboard when you click the return key on the keyboard  NOTE  if your keyboard type is numeric  you won t have a return key  So  you can enable it by giving it a prop  returnKeyType to done  or you could use onSubmitEditing  Keyboard dismiss  It gets called whenever we press the return key  And if you want to dismiss the keyboard when losing focus  you can use onBlur prop  onBlur    Keyboard dismiss

User · Answer

Use React Native s Keyboard dismiss    Updated Answer  React Native exposed the static dismiss   method on the Keyboard  so the updated method is    import   Keyboard   from  react-native     Keyboard dismiss       Original Answer  Use React Native s dismissKeyboard Library   I had a very similar problem and felt like I was the only one that didn t get it   ScrollViews  If you have a ScrollView  or anything that inherits from it like a ListView  you can add a prop that will automatically dismiss the keyboard based on press or dragging events    The prop is keyboardDismissMode and can have a value of none  interactive or on-drag  You can read more on that here   Regular Views  If you have something other than a ScrollView and you d like any presses to dismiss the keyboard  you can use a simple TouchableWithoutFeedback and have the onPress use React Native s utility library dismissKeyboard to dismiss the keyboard for you   In your example  you could do something like this    var DismissKeyboard   require  dismissKeyboard       Require React Native s utility library      Wrap your view with a TouchableWithoutFeedback component like so    lt View style  styles container  gt      lt TouchableWithoutFeedback onPress        gt    DismissKeyboard       gt        lt View gt          lt Text style  styles welcome  gt          Welcome to React Native         lt  Text gt          lt Text style  styles instructions  gt          To get started  edit index ios js        lt  Text gt          lt Text style  styles instructions  gt          Press Cmd R to reload    n           Cmd D or shake for dev menu        lt  Text gt          lt TextInput style   height  40  borderColor   gray   borderWidth  1     gt        lt  View gt      lt  TouchableWithoutFeedback gt    lt  View gt    Note  TouchableWithoutFeedback can only have a single child so you need to wrap everything below it in a single View as shown above

User · Answer

const dismissKeyboard   require  dismissKeyboard    dismissKeyboard      dismisses it   Approach No  2   Thanks to user  ricardo-stuven for pointing this out  there is another better way to dismiss the keyboard which you can see in the example in the react native docs   Simple import Keyboard and call it s method dismiss

User · Answer

We can use keyboard and tochablewithoutfeedback from react-native const DismissKeyboard      children      gt       lt TouchableWithoutFeedback     onPress       gt  Keyboard dismiss       gt       children     lt  TouchableWithoutFeedback gt      And use it in this way  const App        gt       lt DismissKeyboard gt       lt View style  styles container  gt         lt TextInput         style  styles input          placeholder  quot username quot          keyboardType  quot numeric quot          gt         lt TextInput         style  styles input          placeholder  quot password quot          gt       lt  View gt     lt  DismissKeyboard gt      I also explained here with source code

User · Answer

Updated usage of ScrollView for React Native 0 39   lt ScrollView scrollEnabled  false  contentContainerStyle   flex  1     gt    Although  there is still a problem with two TextInput boxes  eg  A username and password form would now dismiss the keyboard when switching between inputs  Would love to get some suggestions to keep keyboard alive when switching between TextInputs while using a ScrollView

User · Answer

Wrapping your components in a TouchableWithoutFeedback can cause some weird scroll behavior and other issues  I prefer to wrap my topmost app in a View with the onStartShouldSetResponder property filled in  This will allow me to handle all unhandled touches and then dismiss the keyboard  Importantly  since the handler function returns false the touch event is propagated up like normal     handleUnhandledTouches       Keyboard dismiss    return false       render         lt View style    flex  1    onStartShouldSetResponder  this handleUnhandledTouches  gt          lt MyApp gt       lt  View gt

User · Answer

Here is my solution for Keyboard dismissing and scrolling to tapped TextInput  I am using ScrollView with keyboardDismissMode prop    import React from  react   import     Platform    KeyboardAvoidingView    ScrollView   from  react-native    const DismissKeyboard      children      gt      const isAndroid   Platform OS      android     const behavior   isAndroid   false    padding      return        lt KeyboardAvoidingView       enabled       behavior   behavior         style    flex  1        gt         lt ScrollView         keyboardShouldPersistTaps   always           keyboardDismissMode   on-drag          gt            children          lt  ScrollView gt       lt  KeyboardAvoidingView gt           export default DismissKeyboard    usage    render       return        lt DismissKeyboard gt          lt TextInput         style   height  40  borderColor   gray   borderWidth  1           onChangeText   text    gt  this setState  text            value  this state text          gt        lt  DismissKeyboard gt

User · Answer

How about placing a touchable component around beside the TextInput   var INPUTREF    MyTextInput    class TestKb extends Component       constructor props            super props              render             return                lt View style    flex  1  flexDirection   column   backgroundColor   blue     gt                   lt View gt                       lt TextInput ref   MyTextInput                           style                                height  40                              borderWidth  1                              backgroundColor   grey                              gt  lt  TextInput gt                   lt  View gt                   lt TouchableWithoutFeedback onPress       gt  this refs INPUTREF  blur    gt                       lt View                          style                                 flex  1                               flexDirection   column                                backgroundColor   green                                                     gt                   lt  TouchableWithoutFeedback gt               lt  View gt

User · Answer

If i m not mistaken the latest version of React Native has solved this issue of being able to dismiss the keyboard by tapping out

User · Answer

import  Keyboard  from  react-native   use Keyboard dismiss   to hide your keyboard in any onClick or onPress event

User · Answer

The simple answer is to use a ScrollView instead of View and set the scrollable property to false  might need to adjust some styling though    This way  the keyboard gets dismissed the moment I tap somewhere else  This might be an issue with react-native  but tap events only seem to be handled with ScrollViews which leads to the described behaviour   Edit  Thanks to jllodra  Please note that if you tap directly into another Textinput and then outside  the keyboard still won t hide

User · Answer

There are a few ways  if you control of event like onPress you can use   import   Keyboard   from  react-native   onClickFunction        gt         Keyboard dismiss       if you want to close the keyboard when the use scrolling    lt ScrollView keyboardDismissMode   on-drag   gt         content  lt  ScrollView gt    More option is when the user clicks outside the keyboard    lt KeyboardAvoidingView behavior  padding  style    flex  1   gt        inputs and other content  lt  KeyboardAvoidingView gt

User · Answer

Below given two types of hiding keyboard  Type  1 if you are not using a scroll view then simply Import keyboard and Add Keyboard dismiss    this is the correct way of implementation  Type  2 if you are using a scroll view then simply  lt ScrollView contentContainerStyle   flex  1   keyboardShouldPersistTaps  handled  gt     lt TextInput   gt   lt  ScrollView gt   this is the correct way of implementation

User · Answer

The simplest way to do this import  Keyboard  from  react-native   and then use the function Keyboard dismiss   That s all  Here is a screenshot of my code so you can understand faster   Now wrap the entire view with TouchableWithoutFeedback and onPress function is keyboard dismiss   Here is the example  In this way if user tap on anywhere of the screen excluding textInput field  keyboard will be dismissed

User · Answer

https   facebook github io react-native docs keyboard html  Use   Keyboard dismiss 0     to hide the keyboard

User · Answer

If any one needs a working example of how to dismiss a multiline text input here ya go  Hope this helps some folks out there  the docs do not describe a way to dismiss a multiline input at all  at least there was no specific reference on how to do it  Still a noob to actually posting here on the stack  if anyone thinks this should be a reference to the actual post this snippet was written for let me know     import React    Component   from  react  import     Keyboard    TextInput    TouchableOpacity    View    KeyboardAvoidingView    from  react-native   class App extends Component     constructor props        super props      this state           behavior   position             this  keyboardDismiss   this  keyboardDismiss bind this         componentWillMount         this keyboardDidHideListener   Keyboard addListener  keyboardDidHide   this  keyboardDidHide          componentWillUnmount         this keyboardDidHideListener remove           keyboardDidHide         Keyboard dismiss          render         return          lt KeyboardAvoidingView         style    flex  1            behavior  this state behavior         gt           lt TouchableOpacity onPress  this  keyboardDidHide  gt             lt View gt               lt TextInput               style                    color    000000                   paddingLeft  15                  paddingTop  10                  fontSize  18                                 multiline  true                textStyle    fontSize   20   fontFamily   Montserrat-Medium                   placeholder  Share your Success                   value  this state text                underlineColorAndroid  transparent                returnKeyType   default                 gt             lt  View gt           lt  TouchableOpacity gt         lt  KeyboardAvoidingView gt

User · Answer

First import Keyboard  import   Keyboard   from  react-native    Then inside your TextInput you add Keyboard dismiss to the onSubmitEditing prop  You should have something that looks like this    render      return       lt View gt         lt TextInput          onSubmitEditing  Keyboard dismiss           gt       lt  View gt

User · Answer

use this for custom dismissal    var dismissKeyboard   require  dismissKeyboard     var TestView   React createClass       render  function            return                lt TouchableWithoutFeedback                  onPress  dismissKeyboard  gt                   lt View   gt               lt  TouchableWithoutFeedback gt

User · Answer

I just tested this using the latest React Native version  0 4 2   and the keyboard is dismissed when you tap elsewhere   And FYI  you can set a callback function to be executed when you dismiss the keyboard by assigning it to the  onEndEditing  prop

User · Answer

Keyboard dismiss   will do it  But sometimes it may lose the focus and Keyboard will be unable to find the ref  The most consistent way to do is put a ref  ref to the textInput  and do  ref blur   when you need to dismiss  and  ref focus   when you need to bring back the keyboard

User · Answer

This just got updated and documented  No more hidden tricks   import   Keyboard   from  react-native      Hide that keyboard  Keyboard dismiss    Github link

User · Answer

use this package react-native-keyboard-aware-scroll-view  use that component as your root component  since this package react-native-keyboard-aware-scroll-view also have an scrollView you need to add this to it    lt KeyboardAwareScrollView keyboardShouldPersistTaps  handled  gt         lt ScrollView keyboardShouldPersistTaps  handled  gt  lt  ScrollView gt   lt  KeyboardAwareScrollView gt

User · Answer

Keyboard module is used  to control keyboard events    import   Keyboard   from  react-native  Add below code in render method   render     return  lt TextInput onSubmitEditing  Keyboard dismiss    gt        You can use -  Keyboard dismiss        static dismiss   Dismisses the active keyboard and removes focus as per react native documents

User · Answer

Wrap your whole component with   import   TouchableWithoutFeedback  Keyboard   from  react-native    lt TouchableWithoutFeedback onPress       gt  Keyboard dismiss    gt       lt  TouchableWithoutFeedback gt    Worked for me

User · Answer

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 textInputs or buttons  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     lt View style   flex  1   gt       lt TextInput keyboardType  numeric   gt   lt  View gt    Change it to   lt ScrollView contentContainerStyle   flexGrow  1     keyboardShouldPersistTaps  handled   gt     lt TextInput keyboardType  numeric   gt   lt  ScrollView gt    or  import  Keyboard  from  react-native    lt TouchableWithoutFeedback onPress  Keyboard dismiss  accessible  false  gt       lt View style   flex  1   gt           lt TextInput keyboardType  numeric   gt       lt  View gt   lt  TouchableWithoutFeedback gt    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    gt      return    children     props      gt         lt TouchableWithoutFeedback onPress  Keyboard dismiss  accessible  false  gt         lt Comp     props  gt           children         lt  Comp gt       lt  TouchableWithoutFeedback gt          const DismissKeyboardView   DismissKeyboardHOC View    Simply use it like this      render          lt DismissKeyboardView gt           lt TextInput keyboardType  numeric   gt       lt  DismissKeyboardView gt      NOTE  the accessible  false  is required to make the input form continue to be accessible through VoiceOver  Visually impaired people will thank you

User · Answer

For hide keyboard use Keyboard dismiss   inside TextInput

User · Answer

You can import keyboard from react-native like below     import   Keyboard   from  react-native     and in your code could be something like this   render         return          lt TextInput         onSubmit  Keyboard dismiss          gt                  static dismiss          Dismisses the active keyboard and removes focus

[reactjs] Hide keyboard in react-native

Examples related to reactjs

Examples related to react-native