Nested React Native ScrollView requires two taps to start scrolling

Question

I have a ScrollView inside another ScrollView. I noticed that I have to tap twice in order to make the nested scroll view start scrolling.

I tried using some properties like scrollEnabled, nestedScrollEnabled and keyboardShouldPersistTaps="always" but none of these helped.

I can't provide any real code because the project is quite big and there are multiple components in between the scroll views. However, the basic structure is similar to this:

<ScrollView>
  <SomeNestedComponents>
    <ScrollView
      scrollEnabled={true}
      nestedScrollEnabled={true}
      keyboardShouldPersistTaps="always"
    >
    </ScrollView>
  </SomeNestedComponents>
</ScrollView>

Jackson Holiday Wheeler · Accepted Answer · 2021-04-09 15:14:20Z

3

I suggest you try putting keyboardShouldPersistTaps='always' on the outermost <ScrollView /> component as well. According to the final answer in this GitHub issue, that should fix it.

For example:

<ScrollView keyboardShouldPersistTaps='always'>
  <SomeNestedComponents>
    <ScrollView
      scrollEnabled={true}
      nestedScrollEnabled={true}
      keyboardShouldPersistTaps='always'
    >
    </ScrollView>
  </SomeNestedComponents>
</ScrollView>

answered Apr 9, 2021 at 15:14

Jackson Holiday Wheeler

77112 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Nested React Native ScrollView requires two taps to start scrolling

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related