Is there any way to recognize when swipe left or right and trigger different function?
Jalson1982 opened this issue · comments
Hello. Is it possible to recognize swipe direction. I want on swipe left to trigger on function and on swipe right other . I tried with gesturecognizer but then I can not control swipe in Interectable.View as it goes back even i did not released it. Any advice?
Hi I'm trying to get the same behavior. Is it possible ?
Hi there,
I know it has been some time, but this issue is still open and I was looking for the same thing, so others might see find this useful.
To achieve that (and other things related to that) you should use alertAreas
and onAlert
.
Here is a little example snippet based on my implementation:
enum Direction {
LEFT = "LEFT",
RIGHT = "RIGHT",
}
const snapPoints = [{ x: 0 }, { x: -SNAP_POINT }, { x: SNAP_POINT }];
// Here we define what we consider to be right and left (10 is just a magic number that felt right while playing with it)
const alertAreas = [
{id: Direction.RIGHT, influenceArea: {left: 10}},
{id: Direction.LEFT, influenceArea: {right: -10}}
];
const SimpleExample = (props) => {
const [direction, setDirection] = React.useState<Direction>(Direction.LEFT);
const onAlert = React.useCallback((evt: Interactable.IAlertEvent) => {
if (evt.nativeEvent[Direction.LEFT] === "enter") {
setDirection(Direction.LEFT);
} else if (evt.nativeEvent[Direction.RIGHT] === "enter") {
setDirection(Direction.RIGHT);
}
}, []);
return (
<View>
{ direction === Direction.LEFT ? <BackgroundContentLeft /> : <BackgroundContentRight /> }
<Interactable.View
dragEnabled={true}
horizontalOnly={true}
animatedNativeDriver={true}
snapPoints={snapPoints}
alertAreas={alertAreas}
onAlert={onAlert}
>
{/*YOUR VIEW CONTENT HERE*/}
</Interactable.View>
);
}