CODEWITHSUNDEEP
javascriptiosreactjsinputreact-native
Ilja
Ilja

Reputation: 46499

Handle TextInput blur when it is clicked away from

I believe within react native (ios) blur event on input only happens whenever I click on another input / button or something like that. I was trying to figure out how to blur it whenever I click anywhere else on the screen be it a static text / image / background etc..

but can't figure out universal solution for this that would work all across the app. Similarly to how web behaves i.e. if I was to click on the whitespace somewhere on stack overflow page current input I am typing in would be blurred.

Upvotes: 2

Views: 1828

Answers (1)

Yo Wakita
Yo Wakita

Reputation: 5450

You can attach an onPress handler to fire off dismissKeyboard (a react native utility) to the component that you would like to have the desired effect:

For example:

const dismissKeyboard = require('dismissKeyboard')

...

<Container onPress={() => dismissKeyboard()}>
  <View> 
    <TextInput/>
  </View>
</Container>

Here is the link to the file in the react-native repo:

https://github.com/facebook/react-native/blob/master/Libraries/Utilities/dismissKeyboard.js

Upvotes: 2

Related Questions