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>

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>

• javascript
• react-native

• please post some code. – Mouser Commented Jan 2, 2017 at 12:29
• @Mouser Added in, currently minimal setup atm, reason it is nested inside Image is to apply full background image to current scene – Ilja Commented Jan 2, 2017 at 12:33
• Check this link out and upvote the answer if it helps!stackoverflow./a/41381151/718968 – Irfan Ayaz Commented Jan 2, 2017 at 12:46
• @IrfanAyaz interesting read, but that answer implies triggering keyboard dismiss once certain action happens, i.e. submit. Thats fine, my question is more about asking why does input not blur when I press away from it? At the moment I am confused about this being default behaviour or an issue on my end. – Ilja Commented Jan 2, 2017 at 13:36
• 1 This is not the default behaviour i suppose! Not for android too. – Irfan Ayaz Commented Jan 2, 2017 at 13:55

1 Answer 1

Unfortunately that is expected behaviour.

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