javascript - Nested scrollable issue on react native - Stack Overflow

admin管理员组

文章数量:1400182

I am developing a book application, which supports both portrait and landscape modes. The pages of the book are svgs which are rendered inside a horizontal @shopify/flash-list. The Page component also has a vertical ScrollView which is enabled only in landscape mode. The problem is that when in landscape mode I scroll vertically fast the ScrollView seems to be not rendered yet and the FlashList scroll is getting triggered, i.e page swipe instead of staying on the same page and scrolling down. If I wait for 1-2 sec. everything works fine and the indented scrollable is getting triggered

I am developing a book application, which supports both portrait and landscape modes. The pages of the book are svgs which are rendered inside a horizontal @shopify/flash-list. The Page component also has a vertical ScrollView which is enabled only in landscape mode. The problem is that when in landscape mode I scroll vertically fast the ScrollView seems to be not rendered yet and the FlashList scroll is getting triggered, i.e page swipe instead of staying on the same page and scrolling down. If I wait for 1-2 sec. everything works fine and the indented scrollable is getting triggered

• javascript
• reactjs
• react-native
• flash-list

Share Improve this question Follow asked Mar 26 at 8:46 Armen KhachatryanArmen Khachatryan 12211 silver badge1010 bronze badges

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 0

If you use react-native-gesture-handler (or you can wrap FlashList/ScrollView with it), you may control gestures more explicitly. For instance, wrapping your vertical ScrollView in a PanGestureHandler that has higher priority than the FlashList’s horizontal scroll can help

import {
  PanGestureHandler,
  GestureHandlerRootView
} from 'react-native-gesture-handler';

function VerticalScrollWrapper({ children }) {
  const onGestureEvent = /* vertical scroll logic  */;
  return (
    <PanGestureHandler
      onGestureEvent={onGestureEvent}
      // The waitFor or simultaneousHandlers may help control 
      // whether the parent gesture is blocked or recognized.
    >
      <ScrollView>
        {children}
      </ScrollView>
    </PanGestureHandler>
  );
}

You can use simultaneousHandlers or waitFor props to coordinate with the FlashList’s gesture handler, effectively telling React Native which gesture to prioritize.

or you can disable the FlashList scroll initially scrollEnabled={false} then enable it a short time later or as soon as the vertical ScrollView is fully laid out

The issue comes from the double scroll conflict between the FlashList and the ScrollView. One possible solution is to handle the book pages (in portrait mode) as components within a full-screen carousel — for example, using react-native-reanimated-carousel with horizontal pagination. Then, reserve the vertical scroll gesture only for landscape mode within each page. This way, you can avoid conflicts between horizontal and vertical scroll gestures and ensure a smoother experience.

本文标签： javascriptNested scrollable issue on react nativeStack Overflow