5

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:

enter image description here

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

Alessandro Izzo
  • 61
  • 3

1 Answers1

-2

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.

Kirill Babich
  • 1
  • 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? – Daniel Dudas Dec 07 '22 at 15:28