CODEWITHSUNDEEP
javascriptreact-native
Ilja
Ilja

Reputation: 46499

Blur TextInput when tapped outside of it

I'm experiencing issue using TextInput expected behaviour is that when I tap on it, it is focused and keyboard is shown, and when I tap around it (anywhere besides the input), the TextInput should blur and keyboard will go away. At present this doesn't happen, text input stays focused no matter where I click. Is this expected behaviour, if so how is it usually handled?

<Image source={require('../assets/background.jpg')} style={{width: undefined; height: undefined; flex: 1;}}>
  <View>
    <TextInput placeholder="Email" style={{ width: 200; height: 40; }} />
  </View>
</Image>

Upvotes: 8

Views: 11058

Answers (1)

Samuli Hakoniemi
Samuli Hakoniemi

Reputation: 19049

Unfortunately that is expected behaviour.

You should wrap TextInput inside ScrollView (and disable scrolling if needed) and then with property keyboardShouldPersistTaps="never".

Upvotes: 17

Related Questions