Can't tap from one TextInput to another

Question

When I'm focused in one TextInput, tapping in another TextInput field doesn't do what I'd expect (change focus to that TextInput).

Instead, it simply blurs the current TextInput, requiring a second tap to focus the next TextInput.

Is there some way to do this, or is this a current shortcoming of React Native?

Example code:

class MyTest extends Component {
  render() {
    return (
      <ScrollView style={styles.container}>
        <View>
          <TextInput style={styles.textInput} />
          <TextInput style={styles.textInput} />
        </View>
      </ScrollView>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#ddd',
    paddingTop: 64
  },
  textInput: {
    backgroundColor: '#fff',
    borderColor: '#000',
    borderWidth: 1,
    height: 46,
    paddingLeft: 10
  }
});

Turns out, when the input fields are within a ScrollView, they behave as I described above (you can't just tap from one field to the other). I tried wrapping the TextInputs in a View to remedy this, but it didn't work.

Answer 1

You need to add keyboardShouldPersistTaps={true} to you ScrollView.

keyboardShouldPersistTaps bool:

When false, tapping outside of the focused text input when the keyboard is up dismisses the keyboard. When true, the scroll view will not catch taps, and the keyboard will not dismiss automatically. The default value is false.