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
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.
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:
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.