ionic-team / ionic-team/ionic-framework
feat: expose direction property on gesture event
- Dominant language
- TypeScript
- Stars
- 52.7k
- Forks
- 13.3k
- Avg merge
- 1d 15h
- Merged PRs (30d)
- 51
Description
# Feature Request
Hi! I have a specific use case where I have an instagram stories-esque image carousel in my app. I am using Ionic Gestures to listen for pan events when swiping to the next image. The issue I have is that I am unable to disable a swipe gesture in a specific direction on the x axis.
For example, when the user opens their stories, they should not be able to swipe backwards because they are watching their first story. I figured I could use the `canStart` event for this. However, the `GestureDetail`'s `deltaX` value is 0 since it is triggered right at the beginning of the gesture event (e.g. no delta has been registered).
I was wondering if we could have some sort of API that would allow us to prevent gestures in a negative of positive direction on an axis? Or is there a better way to do what I'm explaining?

Notice the black screen when I try to swipe back? I am at index 0 and should not be allowed to swipe back like that.
For example here's my React Gesture:
```
const swipeGesture = createGesture({
el: cubeRef.current!,
gestureName: 'swipe-gesture',
direction: 'x',
gesturePriority: 50,
onMove: (ev) => onMove(ev),
onEnd: (ev) => onEnd(ev)
});
swipeGesture.enable(true);
```
I use `react-spring` for my transition animations:
```
const onMove = (ev: GestureDetail) => {
const currentRotate = index * 90 * -1;
const convert = linearConversion([0, width], [currentRotate, currentRotate + 90]);
let v = convert(ev.deltaX);
// prevent current drag event from transitioning more than 90 degrees
if (v > currentRotate + 90) {
v = currentRotate + 90;
} else if (v < currentRotate - 90) {
v = currentRotate - 90;
}
// this is where the transition animation occurs, I am setting my css `translateY` to the value of `rotateY` defined here
set({
rotateY: v,
immediate: true,
});
};
```
In my code I can check to see if the user is at `index === 0`, if so, I would like to prevent pan gestures that result in a positive `deltaX` event.
**Describe Preferred Solution**
A very rough idea is to have an API like:
`axis: 'positive' | 'negative' | 'both'`
If it was possible to use `canStart` for this, I would do something like:
```
const canStart = (ev: GestureDetail) => {
// if we are on the first item and the user tries to swipe backwards
if (index === 0 && ev.deltaX > 0) {
return false
}
// else allow start
return true;
}
```
**Describe Alternatives**
I've tried to `swipeGesture.enable(false)` within my `onMove()` method with hopes that an `onEnd()` event would be called, so that I could re-enable the gesture once they let go but that doesn't work either.
Any thoughts on this would be super helpful, thank you!
**Ionic version:**
[x] **5.1.0**
Contributor guide
Research direction
Start with the createGesture API and GestureDetail behavior described in the issue, focusing on when canStart runs and which gesture values are available. Trace the gesture event entry points and existing direction handling before deciding how the requested direction property should behave. Done means the API supports the stated directional boundary use case and its behavior is covered by the relevant gesture tests.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100