Android: ScrollView which contains textInput not scrolling

Question

I have a scrollView which contains too many textInput. Everything is working until i add textAlign: 'right' to TextInput styles. After that ScrollView not response to scroll. This problem just occurred in android, in iOS it's work as expected. I added a simple code to the snack.expo

  render() {
    let TextInput2 = (
      <TextInput
        style={{
          flex: 1,
          textAlign: 'right',
          height: 50
        }}
        placeholder="placeholder"
      />
    );
    return (
      <ScrollView>
        {TextInput2}
        {TextInput2}
        {TextInput2}
        {TextInput2}
        {TextInput2}
        {TextInput2}
        {TextInput2}
        {TextInput2}
        {TextInput2}
        {TextInput2}
        {TextInput2}
        {TextInput2}
        {TextInput2}
        {TextInput2}
      </ScrollView>
    );
  }

Answer 1

If you have too many items in a ScrollView then maybe you should consider using ListView. I have had a similar issue. At some point after too many items to scroll, ScrollView starts to fail first in Android. I assume i-devices has a better optimization in terms of rendering react native components, which prevent them to fail early.

Answer 2

I'm not sure why textAlign: 'right' causes that, but I noticed a substantial difference between ios and android TextInput. On Android, if the TextInput box is smaller than the font size, it creates a scrollable TextInput inside itself, preventing the scrollview to be the responder. Try to increment the height and the width of each TextInput to be sure this is not the case.