Rotated PanGestureHandler coordinate plane Android
See original GitHub issueHello guys, I have a question regarding differences between Android and iOS PanGesture handler implementation, noticed that if I rotate the parent view of PanGestureHandler in iOS the coordinate plane rotates together, but in Android coordinate plane does not account rotation. Is there any way to rotate coordinate plane together with gesture handler in Android?
I know I can workaround this issue using trigonometry formulas, but this would add additional overhead to my implementation, and performance would suffer.
Here is a code snipped for my gesture handler event which used for resizing a view which accounts rotation in iOS, but still uses the translationX property since the whole coordinate plane is rotated.
Currently only option I see to make this thing work on Android is to use both translationY and translationX using sin and cos but as I mentioned previously such implementation uses more memory and it is slower and in my case performance is very important.
export const resizeHorizontalGestureEvent = (
tempDist,
layoutScale,
position,
width,
draggableOffset,
rotateOffset,
onUpdateSize,
active
) => {
const currentScale = add(1, sub(1, layoutScale));
const layoutScaleValue = currentScale;
const value = (dist, rest) => {
if (position.name === 'right') {
return multiply(sub(dist, rest), layoutScaleValue);
}
return multiply(multiply(sub(dist, rest), layoutScaleValue), -1);
};
return event([
{
nativeEvent: ({state, translationX}) =>
block([
cond(eq(state, State.BEGAN), [
set(tempDist, 0)
]),
cond(eq(state, State.ACTIVE), [
cond(and(not(eq(sub(translationX, tempDist), 0)), greaterThan(add(width, value(translationX, tempDist)), 0)), [
set(width,
add(
width,
value(translationX, tempDist))
),
set(draggableOffset.x, add(
draggableOffset.x,
multiply(divide(multiply(sub(translationX, tempDist), layoutScaleValue), 2), cos(rotateOffset)))),
set(draggableOffset.y, add(
draggableOffset.y,
multiply(divide(multiply(sub(translationX, tempDist), layoutScaleValue), 2), sin(rotateOffset)))),
set(tempDist, translationX)
])
]),
cond(and(eq(state, State.END), not(eq(tempDist, 0))), [
set(tempDist, 0),
call([], () => onUpdateSize())
])
])
}
]);
};
Issue Analytics
- State:
- Created 4 years ago
- Comments:5 (3 by maintainers)

Top Related StackOverflow Question
I had to separate code for Android and iOS. For Android to calculate distance traveled in X axis I had to do
const distance = (x, y) => add(multiply(x, cos(rotateOffset)), multiply(y, sin(rotateOffset)));Hi all. It’s been a while since the last activity on this issue. In the meantime we introduced a new API and also made some changes to unify the behavior of relative transform points across android and iOS. Is anyone here willing to check if this issue is still a problem? Specifically, with the new API you would no longer need to nest handlers and only have single gesture detector object which should eliminate this issue entirely.