ReactNative Nested Horizontal ScrollView ( nested twice)

Question

The View Structure Below

<ScrollView horizontal pagingEnabled>
    <View key={1}/>
    <View key={2}>
        <ScrollView horizontal={false} pagingEnabled>
            <View key={'2-0'}>
                <ScrollView horizontal pagingEnabled>{subviews here}</ScrollView>
            </View>
            <View key={'2-1'}/>
            <View key={'2-2'}/>
        </ScrollView>
    </View>
    <View key={3}/>
</ScrollView>

the problem is that,when I scrolled to the view[key:2], and its subview is view[key:'2-0'] right now, then the scrollview nested by view[key:'2-0'] will take over the gesture responder, and I will never ever got chance to swipe horizontally to the view[key:3] or back to view[key:1]. I've tried to set onMoveShouldSetResponderCapture to the outsidest scrollview to take over gesture responder while the insidest scrollview is on the edge. It will only work when I swipe slowly. Is there anyway to make this work naturally ? thanks, guys

I can't imagine this being a good experience in an app even if it were to work the way you want. React warns you about nested scrollViews for a reason. — Abe
– Abe, Commented Jan 7, 2022 at 6:18
actually ,there is a product named tiktok . The situation I described above is already presented in this app . It has three tabs (switch horizontally) , each tab wrapped a vertical list . Inside the vertical list , there is a horizontal list which holds multiple pictures. lol — nullcol
– nullcol, Commented Jan 7, 2022 at 8:59

nullcol · Accepted Answer · 2022-01-07 09:03:32Z

-3

Finally , I solved this problem be replacing the outsidest scrollview. I implemented the swpie-horizontally view with reanimated and react-native-gesture-handler. So I can totally control the outesidest scroll action.

answered Jan 7, 2022 at 9:03

nullcol

771 gold badge1 silver badge3 bronze badges

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

1 Comment

MadMike Over a year ago

It's nice you found the solution. But as you don't publish it as code, it might be hard for other to use. -1

Collectives™ on Stack Overflow

ReactNative Nested Horizontal ScrollView ( nested twice)

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related