Yulian
Yulian

Reputation: 6769

Nested React Native ScrollView requires two taps to start scrolling

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>

Upvotes: 1

Views: 2845

Answers (1)

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>

Upvotes: 3

Related Questions