React-native-swipe-list-view: Swipe problems in Modal [iOS 13]

[m-ruhl]

Hello 👋

Describe the bug
If we use the swipe-list in a modal VC (iOS 13) we cannot swipe completely to the left.

We are using React-Native-Navigation 6.7.1

      <SwipeListView
        keyExtractor={(item, index) => item.identifier + String(index)}
        onRowOpen={this.bindingOnRowOpen}
        refreshing={false}
        ListEmptyComponent={this.createEmptyComponent}
        data={this.props.location.projectWeek}
        renderItem={this.bindingRenderItem}
        showsVerticalScrollIndicator={false}
        disableRightSwipe={true}
        rightOpenValue={-SwipeableWidth.DEFAULT}
        recalculateHiddenLayout={true}
        renderHiddenItem={this.bindingRenderHiddenItem}
      />

Environment (please complete the following information):

• OS: iOS 13
• RNSLV Version: 3.1.0
• RN Version: 0.61.4

Any ideas to solve this problem?

Thanks
Michael

[jemise111]

Hey @m-ruhl, there are a lot of reported problems with interoperability between this library and react-navigation. Because of all the swipe gestures to navigate their library will often become the first responder when a user starts a gesture and I'm not sure if they allow you to override that? A quick search of the docs didn't reveal anything but maybe I missed something.. ? Sorry it's not a better answer

[Synvox]

This isn't specific to react-navigation. I ran into this problem with react-native's <Modal> component.

Wrapping the Swipe List in a PanGestureHandler seems capture the touch before it gets to the underlaying Modal.

try:

<PanGestureHandler enabled={true}>
      <SwipeListView
        keyExtractor={(item, index) => item.identifier + String(index)}
        onRowOpen={this.bindingOnRowOpen}
        refreshing={false}
        ListEmptyComponent={this.createEmptyComponent}
        data={this.props.location.projectWeek}
        renderItem={this.bindingRenderItem}
        showsVerticalScrollIndicator={false}
        disableRightSwipe={true}
        rightOpenValue={-SwipeableWidth.DEFAULT}
        recalculateHiddenLayout={true}
        renderHiddenItem={this.bindingRenderHiddenItem}
      />
</PanGestureHandler>

[Duya3fithou]

PanGestureHandler

I try it, but still not working :(

[nenjamin2405]

I'm having the same problem with react-native-modal in Android, if you are using react-native-modal, you need to make sure that the attribute swipeDirection="down" of react-native-modal is not enabled. It's a bit annoying, how can I achieve both swipe down gesture for the modal and swipe left/right of list view :(

[nenjamin2405]

Hi @m-ruhl, did you find a solution for this?

[akhatriST]

Quick solution of this is to disable the modal drag gesture, this way the swipe row will receive the gesture and will work accordingly.
Add the drag gesture of Modal on Header or top component so that you are able to drag the Modal as well