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

user_14685768 0
Viewed 253

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

react-navigation-v6 react-navigation react-native-navigation react-native
1 Answers

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.

user_186249480
Related