Clever Geek Handbook

Android: ScrollView that contains textInput, not scroll

I have a scrollView that contains too many textInput. Everything works until I add the style textAlign: 'right'

to the TextInput. After that the ScrollView doesn't respond to scrolling. This issue only happened in android, it works as expected in iOS. I added simple code to 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>
    );
  }
+3


source to share


2 answers


I'm not sure why textAlign: "right" is causing this, but I noticed a significant difference between ios and android TextInput. On Android, if the TextInput field is smaller than the font size, it creates a scrollable TextInput within itself, preventing the scrollview from responding. Try increasing the height and width of each TextInput to make sure it isn't.



+1


source


If you have too many items in ScrollView

, then you might want to consider using ListView

. I had a similar problem. At some point after too many items to scroll, ScrollView

Android starts to crash first. My guess is that i-devices have better optimization in terms of rendering responsive native components, which prevents them from crashing sooner.



0


source






More articles:


All Articles