How to disable left swipe gesture in react-native-gesture-handler/Swipeable?

[luvnish19]

Description

We are creating a component similar like Instagram where we have a Posts screen and Messaging screen. When perform swipe from right to left, screen navigates from Posts screen to Messaging screen. For swiping, we are using @react-navigation/material-top-tabs

In Messaging screen, Flatlist component is used to show conversations list where react-native-gesture-handler/Swipeable is used to show controls which are delete and mute button when user performs "right to left" swipe similar like Instagram which is working 100% fine but when trying to navigating back to post screen using left to right swipe on Flatlist then react-native-gesture-handler/Swipeable gesture executes and their "onSwipeableOpen" callback calls which should not execute so that smoothly translation should be perform from Messaging to Post Screen.

As well as there is no way to disable left to right swipe on FlatList. Is there any solution/ workaround or any suggestion to achieve this task?

Steps to reproduce

Take reference of Instagram where we have Posts screen and Conversations Screen

1. Create 2 child components: Posts Screen and ** Conversations Screen** under Main component using @react-navigation/material-top-tabs
2. Swipe to ** Conversations screen**. Flatlist is used to display Conversations and wrapped with react-native-gesture-handler/Swipeable
3. Right swipe should work and left swipe should be disabled so that we could easily navigate back to the Posts Screen

Snack or a link to a repository

https://stackoverflow.com/questions/75369425/how-to-disable-left-swipe-gesture-in-react-native-gesture-handler-swipeable/75371366#75371366

Gesture Handler version

2.8.0

React Native version

0.70.6

Platforms

Android, iOS

JavaScript runtime

None

Workflow

None

Architecture

None

Build type

None

Device

None

Device model

No response

Acknowledgements

Yes

[luvnish19]

Hey! 👋

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

Could you provide a snack or a link to a GitHub repository under your username that reproduces the problem?

This is the maximum explaination.

[matthewwolfe]

You might be able to try:

renderLeftActions={() => null}

I have a list where I want to swipe right -> left to display a delete button, but I wanted to disable any other left -> right swiping, and that seemed to do the trick.

[devoutDisciple]

I'm having the same issue too，It prevents the default right-swipe event for iOS to return to the previous page. How do you solve it?

[mblode]

I'm also having this issue. I have a list of swipeable with a right action and no left action. However, when swiping from the left edge of the screen it blocks the ability to return to the previous page.

[alexandcote]

I'm also having the same issue. I create a minimal reproduction snack

[paule89123]

Also having this issue. Has anyone come up with a fix?

[m-bert]

Hi! @luvnish19, could you please prepare a reproduction? I've tried to use the one provided by @alexandcote, but it seems to work fine (as you can see on the video below)

Nagranie.z.ekranu.2024-01-15.o.09.28.55.mov

[alyosha]

+1

[codecomeon]

What I Do

@alyosha I add dragOffsetFromLeftEdge to Swipeable, it works. It will disable the begin area of panGestureHandler to offset "dragOffsetFromLeftEdge". And then, iOS swipe right navigation will work~

Swipeable Components Source Code

PanGestureHandler API

[alexandcote]

@m-bert I just tested it again on my device and I was able to replicate the issue.

I have an iPhone and I see you tried to replicate the issue on Android. Maybe the issue only affect iOS devices?

[alexandcote]

I took some time and recorded a video

Recording.480p.mov

[m-bert]

Thanks for pointing this out @alexandcote! You can disable left swipe by using dragOffsetFromLeftEdge, as @codecomeon already mentioned. For example:

 <Swipeable
        ...
        dragOffsetFromLeftEdge={Number.MAX_VALUE} 
      >

will effectively disable swipe from left.

Let me know if this is something that you were looking for!