kkemple/react-native-sideswipe

onPress not firing inside the carousel render Item

amrosama2020 opened this issue · 2 comments

This is not a bug it is something I have struggled with and I would like to share it with others, would gladly create a pull request in read me if agreed.

onPress not firing inside the carousel rendered items

On android and IOS real device if a user tries to press a TouchableWithoutFeedback element or touchableOpacity the event won't fire in most cases since the dragging/swipe starts with the touch. (onPress in emulator works perfectly)

To fix this issue I have added the following:

shouldSwipe:function({ dx, dy}){
   return  dx < -30 ||  dx > 30;
},
render: function(){
return (
   <SideSwipe
        ....
	shouldCapture={(gestureState) => this.shouldSwipe(gestureState)}
   />);
}

The code above utilizes the shouldCapture property to start the swiping event once the user drags the swipe element for a small bit which gives the onPress event a chance to fire before swiping

I've got a similar issue with a FlatList inside the render item... it won't scroll. The fix suggested here doesn't work for me, in the simulator (I haven't yet tried it on the device, I'm not set up to do that yet). I'm wondering if this has something to do with it: https://stackoverflow.com/questions/51131227/react-native-panresponder-onmoveshouldsetpanresponder-not-working

In that SO thread, they discover that onStartShouldSetPanResponder and onMoveShouldSetPanResponder appear to be mutually exclusive. I see that SideSwipe uses them together - onMoveShouldSetPanResponder is ultimately how shouldCapture is implemented.

Also facing this issue, can't find a way to allow pan on some touchables and prevent on some.