Is there any way to recognize when swipe left or right and trigger different function?

[Jalson1982]

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?

[Antonio Pantano]

Hi I'm trying to get the same behavior. Is it possible ?

[Cai Leao]

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>
  );
}