React-Native: 'onBlur' is not getting fired when touched out side of the TextInput

Question

   <TextInput
        ref={ ref => this.mobileNumberRef = ref}
        keyboardType='phone-pad'
        returnKeyType='done'
        onBlur={() => Keyboard.dismiss()}
   />

I would like to dismiss the keyboard when touched outside of the TextInput area. But onBlur() is not getting fired.

Can anybody let me know how to achieve this? Thank You!

Answer 1

First of all onBlur called when the text input is blurred. But if you want to dismiss the keyboard when you touched outside of the TextInput area used below scenarios

<ScrollView keyboardShouldPersistTaps="handled">
  <TextInput
    onChangeText={this.onChangeText}
    keyboardType="phone-pad"
    returnKeyType="done"
  />
</ScrollView>

or

<TouchableWithoutFeedback onPress={Keyboard.dismiss} accessible={false}>
  <View style={{ flex: 1, backgroundColor: "#fff" }}>
    <TextInput
      onChangeText={this.onChangeText}
      keyboardType="phone-pad"
      returnKeyType="done"
    />
  </View>
</TouchableWithoutFeedback>

Hope this helps you. Feel free for doubts.

Answer 2

onBlur occurs when an Input loses focus.

Keyboard.Dismiss Dismisses the active keyboard and removes focus.

By touching outside of the TextInput you will anyway lose focus from the element so I am not sure why do you need Keyboard.Dimiss as well.

I've also tested this on the sandbox and for me it works fine. Maybe you can share more code and explain exactly what do you want to achieve?

Lastly please check Unfocus a TextInput in React Native maybe that will help you solve your issue.