Calculate degree based on focalX and focalY in PinchGestureHandler. React Native Reanimated 2

[MuhammadRafeh]

I want to calculate rotation degree of View using focalX and focalY. How we can calculate degree with such focal points or is their any other way to do it using PinchGestureHandler?

import React from 'react';
import { StyleSheet, Image, Dimensions } from 'react-native';
import {
  PinchGestureHandler,
  PinchGestureHandlerGestureEvent,
} from 'react-native-gesture-handler';
import Animated, {
  useAnimatedGestureHandler,
  useAnimatedStyle,
  useSharedValue,
  withTiming,
} from 'react-native-reanimated';

// Credit to Mariana Ibanez https://unsplash.com/photos/NJ8Z8Y_xUKc
const imageUri =
  'https://images.unsplash.com/photo-1621569642780-4864752e847e?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=668&q=80';

const AnimatedImage = Animated.createAnimatedComponent(Image);

const { width, height } = Dimensions.get('window');

export default function App() {
  const scale = useSharedValue(1);
  const focalX = useSharedValue(0);
  const focalY = useSharedValue(0);

  const pinchHandler =
    useAnimatedGestureHandler({
      onActive: (event) => {
        scale.value = event.scale;
        focalX.value = event.focalX;
        focalY.value = event.focalY;
      },
      onEnd: () => {
        scale.value = withTiming(1);
      },
    });

  const rStyle = useAnimatedStyle(() => {
    return {
      transform: [
        { translateX: focalX.value },
        { translateY: focalY.value },
        { translateX: -width / 2 },
        { translateY: -height / 2 },
        { scale: scale.value },
        { translateX: -focalX.value },
        { translateY: -focalY.value },
        { translateX: width / 2 },
        { translateY: height / 2 },
      ],
    };
  });

  const focalPointStyle = useAnimatedStyle(() => {
    return {
      transform: [{ translateX: focalX.value }, { translateY: focalY.value }],
    };
  });

  return (
    <PinchGestureHandler onGestureEvent={pinchHandler}>
      <Animated.View style={{ flex: 1 }}>
        <AnimatedImage
          style={[{ flex: 1 }, rStyle]}
          source={{ uri: imageUri }}
        />
        <Animated.View style={[styles.focalPoint, focalPointStyle]} />
      </Animated.View>
    </PinchGestureHandler>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  focalPoint: {
    ...StyleSheet.absoluteFillObject,
    width: 20,
    height: 20,
    backgroundColor: 'blue',
    borderRadius: 10,
  },
});

Here is the Snack too! I want to rotate it too, while making gesture!
https://snack.expo.dev/@muhammadrafeh/zooming-image

@wcandillon Kindly help me Sir.

[jgonet]

There's RotationGH for that.

[MuhammadRafeh]

@jakub-gonet Thank u so much brother! But I am doing image scaling with pinch gesture handler. But we can't use two gestures for same image.

[jgonet]

I don't quite understand, why you can't use two gestures for the same image?
If you mean that RotationGH interrupts pinch then it's intended, try using simultaneousHandlers property for that.

[MuhammadRafeh]

@jakub-gonet have a look at code below;

const style = useAnimatedStyle(() => {
    return {
      transform: [
        { scale: scale.value },
      ]
    }
  })

  <PinchGestureHandler onGestureEvent={panHandler}>
        <Animated.View style={[styles.paintContainer, style]} />
      </PinchGestureHandler>

Above code is what I'm doing in order to scale it. I want to rotate it too. So according to you I can do it like below

...

  <PinchGestureHandler onGestureEvent={panHandler}>
     <RotationGestureHandler
        onGestureEvent={this._onRotateGestureEvent}
        onHandlerStateChange={this._onRotateHandlerStateChange}>
                       <Animated.View style={[styles.paintContainer, style]} />
      </RotationGestureHandler>
      </PinchGestureHandler>

This is how we can use both gestures?

[jgonet]

No.
First of all, you have to use Animated.View between handlers - they need to bind to native views and handlers don't create one:

<PinchGestureHandler>
	<Animated.View>
	      <RotationGestureHandler>
			  <Animated.View />
		  </RotationGestureHandler>
	</Animated.View>
</PinchGestureHandler>

Next, you have to add simultaneousHandlers property:

const pichRef = useRef(); // or `createRef` in class components
const rotationRef = useRef();

return (
	  <PinchGestureHandler ref={pinchRef} simultaneousHandlers={rotationRef}>
		  <Animated.View>
		        <RotationGestureHandler ref={rotationRef} simultaneousHandlers={pinchRef}>
				    <Animated.View />
			    </RotationGestureHandler>
		  </Animated.View>
	  </PinchGestureHandler>
);

Then you can add onGestureEvent & onHandlerStateChange.

[MuhammadRafeh]

@jakub-gonet Thanks brother I got it too!