React-native dismiss Keyboard when focus out / clicked somewhere else, outside textfield

Question

I'm new to react-native. I have a textfield(Input). I want to the Keyboard to be dismissed when user clicks somewhere else except input field. I tried several solutions suggested here like TouchableWithoudFeedback, but they did not work. Also, the point which is not clear to me, I can use any function inside onFocus, on the other hand, nothing worked in onBlur or onEndEditing Here is my code of Input component.

<InputGroup borderType='rounded' style={styles.inputGrp}>
                                    <Input placeholder={'Password'} secureTextEntry={true} style={styles.input}
                                           onChangeText={(pin1) => this.setState({pin1: pin1})}
                                           value={this.state.pin1}
                                           maxLength={8}
                                    />

Praefect

Answer 1

here is the solution to that above question: Hide keyboard in react native

import {Keyboard, TouchableWithoutFeedback} from 'react-native'

wrap your root component with TouchableWithoutFeedback and trigger Keyboard.dismiss at onPress, like following

<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
    <View style={{flex: 1}}>
          ........
          //rest of the component
          ........
    </View>
</TouchableWithoutFeedback>

Utopian

What if the rest of the component includes a Flatlist? In my case I did the exact same thing but I have a FlatList inside which does not scroll properly at all . – Mccaffrey

For the record, I've tried this and it works fine on Android. On IOs and my app though, it brings very inconsistent behavior. Some buttons are not tapeable. – Imprisonment

Answer 2

Solution here is to wrap your form's with <ScrollView keyboardShouldPersistTaps="handled" />. The keyboardShouldPersistTaps is the important part. It can also be "never" for keyboardShouldPersistTaps, but then keyboard might dismiss too easily. This solution was shared at https://mcmap.net/q/748430/-blur-textinput-when-tapped-outside-of-it

Bind

This also allows you to press a button without first dismissing the keyboard. TouchableWithoutFeedback will not let you press a visible submit button if the keyboard is open. Attempting to press a button will dismiss the keyboard, but not click the button until you click it a second time. – Strobotron

Thanks for sharing that awesome tip @JohnHarding! – Bind

This doesn't work for me. I am trying to use this with multiline={true} but even without setting that prop this doesnt seem to work in the latest version – Overmatch

Answer 3

For someone like me who wants to use it with a FlatList, you have to use the keyboardShouldPersistTaps prop as follows:

<FlatList
   data
   ...otherProps
   keyboardShouldPersistTaps="always"
/>

Pleonasm

Answer 4

You can use keyboard's done button to dismiss the keyboard when the user is done entering text.

                                <TextInput placeholder={'Password'} secureTextEntry={true} style={styles.input}
                                       onChangeText={(pin1) => this.setState({pin1: pin1})}
                                       value={this.state.pin1}
                                       maxLength={8}
                                       onSubmitEditing={ ()=> this.dismissKeyboardAction()}/>

Define this method somewhere.

dismissKeyboardAction() {
    dismissKeyboard();
  }

Don't forget to import

var dismissKeyboard = require('dismissKeyboard');

Also, there are several workarounds possible if you want to dismiss keyboard when the user taps anywhere else other than keyboard whenever the keyboard is visible. Use keyboardWillShow and keyboardWillHide methods to set and unset a state variable something like isKeyboardVisible = true. Also, based on this state variable, if true, render an overlay over your entire screen (transparent TouchableHighlight or TouchableWithoutFeedback) with absolute coordinates (from height 0 to screen height - keyboardheight) and call the same dismisskeyboard() method on tap.

Something like

  componentWillMount() {
  if (Platform.OS === 'ios') {
      Keyboard.addListener('keyboardWillShow', this.keyboardWillShow); //not supported on Android
      Keyboard.addListener('keyboardWillHide', this.keyboardWillHide); //not supported on Android
    }
    else {
      Keyboard.addListener('keyboardDidShow', this.keyboardWillShowAndroid);
      Keyboard.addListener('keyboardDidHide', this.keyboardWillHideAndroid);
   }
}
keyboardWillShow (e) {
    let newSize = e.endCoordinates.height
    this.setState({
      keyboardHeight: newSize,
      isKeyboardVisible: true
    })
  }
keyboardWillHide (e) {
    this.setState({
      keyboardHeight: 0,
      isKeyboardVisible: false
    })
  }

You can get screen height like this

import Dimensions from 'Dimensions';
var height = Dimensions.get('window').height;
    var width = Dimensions.get('window').width;

From here, you can render a transparent touchable component over your UI only when the keyboard is visible and dismiss keyboard in the onPress method.

Urine

dismisskeboard nolonger works , it has been deprecated – Clarettaclarette

Keyboard.dismiss() can be used instead. – Urine

@AhmedAli Also, could you provide the link which says it has been depreciated? It works for me. – Urine

Which version of RN you're using ? – Clarettaclarette