question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Rotated PanGestureHandler coordinate plane Android

See original GitHub issue

Hello 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:closed
  • Created 4 years ago
  • Comments:5 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
tomasgcscommented, Jul 13, 2019

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

0reactions
kmagieracommented, Mar 31, 2022

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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

PanGestureHandler | React Native Gesture Handler
A continuous gesture handler that can recognize a panning (dragging) gesture and track its movement. The handler activates when a finger is placed...
Read more >
android - Get new position of coordinate after rotation with Matrix
Rotate the rectangle; Get the new position of the coordinate after the rotation. The parts I can't figure out are 2 & 4....
Read more >
Release Notes - HERE SDK for Android (Lite Edition)
With HERE SDK 4.14.0 we plan to set it to true, by default. ... the previously deprecated constructor Location(@NonNull final GeoCoordinates coordinates, ...
Read more >
The 5-min Rotation Gesture (& 5-min Bonus) - YouTube
In this video, we use the RotationGestureHandler for the first time Previous video on the Pinch Gesture Handler: ...
Read more >
react-native-gesture-handler: Versions - Openbase
Starting from this version we plan on following the below methodology for ... problem with incorect tap gesture coordinates on Android reported in...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found