CODEWITHSUNDEEP
androidreact-native
afishhhhh
afishhhhh

Reputation: 71

React-Native TextInput showSoftInputOnFocus not work well

There are two TextInputs in my code. One of them I set its showSoftInputOnFocus to true, I want to show keyboard when it focused. The other one I set its showSoftInputOnFocus to false, I don't want to show keyboard when it focused.

<View>
  <Text style={_label}>Field1</Text>
  <TextInput
    value={value1}
    showSoftInputOnFocus={false}
    keyboardType="numeric"
  />
</View>
<View>
  <Text style={_label}>Field2</Text>
  <TextInput
    value={value2}
    autoFocus={true}
    showSoftInputOnFocus={true}
  />
</View>

When the second TextInput focused, the keyboard displayed. Then I press the first TextInput, it focused, but the keyboard remained on the screen, it doesn't dismiss.

I try to add onBlur={Keyboard.dismiss} to the second TextInput. When I switch the cursor from the second TextInput to the first, the keyboard is indeed hidden, but the first TextInput is not focused. I must press the first TextInput again to make it focused.

How to make the first TextInput get focus immediately when I press it?

Upvotes: 1

Views: 1927

Answers (1)

mahmoudafer
mahmoudafer

Reputation: 1181

There's a prop called keyboardShouldPersistTaps for ScrollViews, it changes the behavior of touches when the keyboard is shown. Try to add a ScrollView in your main view:

<View>
    <ScrollView keyboardShouldPersistTaps='always'>
        ...
    </ScrollView>
</View>

Upvotes: 1

Related Questions