0

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

nullcol
  • 79
  • 1
  • 1
  • 3
  • 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 Jan 07 '22 at 06: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 Jan 07 '22 at 08:59

1 Answers1

-2

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.

nullcol
  • 79
  • 1
  • 1
  • 3
  • 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 – MadMike Jan 07 '22 at 09:52