React navigation v6 Modal with ScrollView inside - swipe down modal when top scrollview reached

Question

I have a problem with the modal-presentation of react-navigation v6 to present a modal with ScrollView inside of it. Actually if I enable gesture to swipe down the modal, it doesn't work if there is a ScrollView inside and I can swipe down only on the header.

I need that when reaching the ScrollView's top, must start dismiss animation gesture. This is the expected behavior:

This is the code used inside the RootNavigation:

<RootStack.Group screenOptions={{ presentation: 'modal', cardOverlayEnabled: true, ...TransitionPresets.ModalPresentationIOS }}>
    <RootStack.Screen
       component={ModalPage}
       name="ModalPage"
       options={ModalPageNavOptions}
    />
</RootStack.Group> 

This is render of ModalPage.js

<ScrollView nestedScrollEnabled>
  <Text>TEST TEXT</Text>
  <Text>TEST TEXT</Text>
  <Text>TEST TEXT</Text>
  <Text>TEST TEXT</Text>
  <Text>TEST TEXT</Text>
  <Text>TEST TEXT</Text>
  <Text>TEST TEXT</Text>
  <Text>TEST TEXT</Text>
  <Text>TEST TEXT</Text>
  <Text>TEST TEXT</Text>
  <Text>TEST TEXT</Text>
  <Text>TEST TEXT</Text>
  <Text>TEST TEXT</Text>
  <Text>TEST TEXT</Text>
  <Text>TEST TEXT</Text>
  <Text>TEST TEXT</Text>
  <Text>TEST TEXT</Text>
  <Text>TEST TEXT</Text>
  <Text>TEST TEXT</Text>
</ScrollView>

PS: I'm using expo

Endurant

Have you found a way to get around this? I am having a same issue. – Burgee

Answer 1

For iOS, this behavior is possible to achieve with Native Stack Navigator with the same code you've provided.

If you still want to use just the Stack Navigator then here are some solutions from other people but I can't say for sure that they work well.

Apices

I switch to native stack and if you open the modal and try to close it works ok, but if you scroll down and come back to the top and try to close it it's not working anymore. Do you have any idea what could fix this? – Bawd