{ presentation: 'modal', gestureEnabled: false } is swipable on iOS (Native Stack navigation)

Bartozzz commented 2 years ago

Description

gestureEnabled: false does not prevent the swipe gesture on Native Stack modals (presentation: 'modal'). Instead, it bounces modals to their original position on release.

Context

I have a Native Stack modal with gestures disabled and a close button inside. I want to dismiss the modal on close button press and disable the swipe gesture to prevent the user from seeing what's underneath the modal.

I tried wrapping the whole content in a <ScrollView>/<Pressable> thinking it will capture the user's gestures and prevent the Stack from swiping on scroll, but it looks like RN touch events are canceled.

Screenshots

https://user-images.githubusercontent.com/6741707/163718148-7c34de53-1e4f-46b2-9dab-11b20cd5b37c.mov

Expected behavior

The modal should have gestures disabled and don't move on scroll gestures.

Actual behavior

The modal moves up/down on scroll gesture and bounces to its original position on release.

Steps To Reproduce

Code below

Reproduction

<NavigationContainer>
  <Stack.Navigator>
    <Stack.Screen name="Game" component={GameScreen} />

    <Stack.Group screenOptions={{
      presentation: 'modal',
      gestureEnabled: false,
    }}>
      <Stack.Screen name="GameOver" component={GameOverScreen} />
      <Stack.Screen name="GameWon" component={GameWinScreen} />
    </Stack.Group>
  </Stack.Navigator>
</NavigationContainer>

Platform

[x] iOS
[ ] Android
[ ] Web
[ ] Windows
[ ] tvOS

Workflow

[x] Managed workflow
[ ] Bare workflow

Package versions

package	version
react-native	`0.64.3`
@react-navigation/native	`^6.0.2`
@react-navigation/native-stack	`^6.1.0`
react-native-screens	`~3.10.1`
react-native-safe-area-context	`3.3.2`
react-native-gesture-handler	`~2.1.0`
react-native-reanimated	`~2.3.1`
expo	`~44.0.0`

github-actions[bot] commented 2 years ago

Hey! 👋

The issue doesn't seem to contain a minimal reproduction.

Could you provide a snippet of code, a snack or a link to a GitHub repository that reproduces the problem?

WoLewicki commented 2 years ago

I believe it is a duplicate of the discussion from here: https://github.com/software-mansion/react-native-screens/issues/736#issuecomment-762179482, so maybe we should close this one to keep the discussion in one place? Also, if you know of any native apps that provide a behavior of not being able to drag modal down a little, please provide them there. I am afraid it would be wrong from the HIG from apple to not be able to drag the formSheet modal a little and if you want such behavior, you should use fullScreenModal. I will close this issue then. Feel free to comment here if I am wrong and we can always reopen it then.

macalinao commented 4 months ago

hi @WoLewicki -- I think we should reopen this issue

One example which is common in many apps is to allow dragging e.g. a slider or highlighting things on a graph-- when the modal jerks a bit, it breaks the slider or graph. Let me know if you still disagree with this.

WoLewicki commented 4 months ago

@macalinao could you provide here e.g. a short video clip of an app with the formsheet modal where you can do such things and the modal is not moved?

software-mansion / react-native-screens