CODEWITHSUNDEEP
androidreact-nativescrollviewtextinput
Meysam Izadmehr
Meysam Izadmehr

Reputation: 3262

Android: ScrollView which contains textInput not scrolling

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>
    );
  }

Upvotes: 6

Views: 1345

Answers (2)

Ruben Rizzi
Ruben Rizzi

Reputation: 352

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.

Upvotes: 1

milkersarac
milkersarac

Reputation: 3479

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.

Upvotes: 1

Related Questions