jemise111 / react-native-swipe-list-view

A React Native ListView component with rows that swipe open and closed
https://www.npmjs.com/package/react-native-swipe-list-view
MIT License
2.78k stars 528 forks source link

Enable access to onPanResponderTerminationRequest through props #586

Open Aryk opened 2 years ago

Aryk commented 2 years ago

When inside a horizontally scrolling tab view, it's very difficult to get certain interactions working without access to onPanResponderTerminationRequest.

For example, this user had to change this setting to get their issue working

https://github.com/jemise111/react-native-swipe-list-view/issues/34#issuecomment-245454580

I also needed to set onPanResponderTerminationRequest to () => false in order for it to keep the swiping going inside a horizontal tab view.

Here is my patch:

diff --git a/node_modules/react-native-swipe-list-view/components/SwipeRow.js b/node_modules/react-native-swipe-list-view/components/SwipeRow.js
index 9e3767f..24fa2c4 100644
--- a/node_modules/react-native-swipe-list-view/components/SwipeRow.js
+++ b/node_modules/react-native-swipe-list-view/components/SwipeRow.js
@@ -64,6 +64,8 @@ class SwipeRow extends Component {
                 this.handlePanResponderRelease(e, gs),
             onPanResponderTerminate: (e, gs) =>
                 this.handlePanResponderEnd(e, gs),
+            // @aryk - Added this so that it keeps swiping even inside a horizontal tab view.
+            onPanResponderTerminationRequest: this.props.onPanResponderTerminationRequest,
             onShouldBlockNativeResponder: () => false,
         });

diff --git a/node_modules/react-native-swipe-list-view/types/index.d.ts b/node_modules/react-native-swipe-list-view/types/index.d.ts
index bd71cf6..748d680 100644
--- a/node_modules/react-native-swipe-list-view/types/index.d.ts
+++ b/node_modules/react-native-swipe-list-view/types/index.d.ts
@@ -1,5 +1,5 @@
 import { Component } from 'react';
-import { StyleProp, ViewStyle, ListView, NativeSyntheticEvent, NativeScrollEvent, ListRenderItemInfo, ListViewDataSource, SectionListProps, FlatListProps, GestureResponderEvent, PanResponderGestureState } from 'react-native';
+import { StyleProp, ViewStyle, ListView, NativeSyntheticEvent, NativeScrollEvent, ListRenderItemInfo, ListViewDataSource, SectionListProps, FlatListProps, GestureResponderEvent, PanResponderGestureState, PanResponderCallbacks } from 'react-native';

 type SwipeGestureEndedData = {
    translateX: number;
@@ -205,6 +205,10 @@ interface IPropsSwipeRow<T> {
     * useNativeDriver: true for all animations where possible
     */
    useNativeDriver: boolean;
+   /**
+    * Added in case we want to override this behavior.
+    */
+   onPanResponderTerminationRequest: PanResponderCallbacks["onPanResponderTerminationRequest"];
 }

 export class SwipeRow<T> extends Component<Partial<IPropsSwipeRow<T>>> {

It's only a few lines of code and allows developers to get additional control over the interactions. Would love to be able to remove this patch eventually.