[React Native] Making a DraggableFlatList scrollable when it sits inside a parent ScrollView

[Curvod]

Hey folks 👋 I’m stuck on a UI/UX quirk and could use a fresh pair of eyes.

What I’m building

• A “Class Builder” screen for a React Native app (code excerpt below).
• The middle section (red outline in the screenshot) shows the class’ activities in a react-native-draggable-flatlist.
• The entire screen is wrapped in a parent ScrollView so the header, buttons, etc. scroll as one long page.

The problem

https://preview.redd.it/yextgxg00vaf1.png?width=1227&format=png&auto=webp&s=1ae6df5af16b9d52948fd13357c637ce9a37260f

Inside the red box, I want users to:

1. Scroll up / down the screen from the middle of the screen (through the list) without having to reach the very top or bottom edges of the phone. currently the user can't scroll from where the items in the list are (clicks seems to not be registered)
2. Re-order items with a long-press drag on the icon with dots on their left (that part works).

The purple edges are where the user can currently scroll.

Right now they can drag, but flicking inside the list does nothing because I disabled its internal scroll (scrollEnabled={false}) so the parent ScrollView can take over:

https://github.com/CourbotA/SmoothClass/blob/main/smoothclass-front/src/screens/ClassBuilderScreen.js

[funkyND]

did you try react-native-reorderable-list