I'm trying to nest ScrollViews in React Native; a horizontal scroll with nested vertical scrolls.
Here's an example:
var Test = React.createClass({ render: function() { return ( <ScrollView style={{width:320, height:568}} horizontal={true} pagingEnabled={true}> {times(3, (i) => { return ( <View style={{width:320, height:568}}> <ScrollView> {times(20, (j) => { return ( <View style={{width:320, height:100, backgroundColor:randomColor()}}/> ); })} </ScrollView> </View> ); })} </ScrollView> ); }, }); AppRegistry.registerComponent('MyApp', () => Test);
The outer scroller works flawlessly, but the inner one sticks when you touch it while it's moving. What I mean is: if you scroll, lift your finger and touch it again while it's still moving with momentum, it stops and doesn't react at all to touch moves. To scroll more you have to lift your finger and touch again.
This is so reproducible it feels like something to do with the Gesture Responder.
Has anyone seen this issue?
How would I even begin to debug this? Is there a way to see what's responding to touches, granting and releasing, and when?
Thanks.
Update:
It looks like it is the responder system, by putting onResponderMove
listeners on the inner and outer scrollers:
<ScrollView onResponderMove={()=>{console.log('outer responding');}} ... <ScrollView onResponderMove={()=>{console.log('inner responding');}}> ...
It's clear that the outer ScrollView is grabbing control. The question, I guess, is how do I stop the outer scroller from taking control when trying to scroll vertically? And why is this only happening when you try to scroll an already moving inner ScrollView?
To fix nested ScrollView locking up with React Native, we can set the nestedScrollEnabled prop to true . to add 2 ScrollView s in another ScrollView . And we set the height of each so they all show on the screen. We set nestedScrollEnabled to true so we can scroll the nested ScrollView s.
React Native's ScrollView component is a generic container that can contain multiple elements — Views, Texts, Pressables, and even another ScrollView.
When developing with React Native and nesting FlatList or SectionList component inside a plain ScrollView, your debugger might display the following warning: VirtualizedLists should never be nested inside plain ScrollViews with the same orientation - use another VirtualizedList-backed container instead.
NestedScrollView is just like ScrollView , but it supports acting as both a nested scrolling parent and child on both new and old versions of Android. Nested scrolling is enabled by default.
If you are working with RN > 56.0, just add this prop to your scroll views:
<ScrollView nestedScrollEnabled = {true}> ...... <ScrollView nestedScrollEnabled = {true}> ..... </ScrollView> </ScrollView>
That's the only one worked for me.
In your panresponder for the inner one, try setting this:
onPanResponderTerminationRequest: () => false
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With