Pan, Pinch and Rotate gesture using Reanimated 2 [REACT NATIVE]

Expo SDK
1

I’m working on a react-native nested pan>rotation>pinch component using reanimated 2, but I’m struggling to combine all the values.

 const translateX = useSharedValue(0);
  const translateY = useSharedValue(0);

  const scale = useSharedValue(1);
  const focalX = useSharedValue(0);
  const focalY = useSharedValue(0);

  const rotate = useSharedValue(0);

  const animated = useAnimatedStyle(() => ({
    transform: [
      { translateX: translateX.value * scale.value },
      { translateY: translateY.value * scale.value },
      { scale: scale.value },
      { rotate: `${rotate.value}rad` },
    ],
  }));


<PanGestureHandler
      ref={panRef}
      onGestureEvent={onPanGestureEvent}
      simultaneousHandlers={[rotationRef, pinchRef]}
    >
      <Animated.View
        style={animated}
      >
        <RotationGestureHandler
          onGestureEvent={onRotateGestureEvent}
          ref={rotationRef}
          simultaneousHandlers={[pinchRef]}
        >
          <Animated.View style={[{ flex: 1 }]}>
            <PinchGestureHandler
              onGestureEvent={onPinchGestureEvent}
              ref={pinchRef}
            >
              <Animated.View style={[{ flex: 1 }]}>
                <View
                  style={{
                    width: SIDE,
                    height: SIDE,
                    backgroundColor: "darkblue",
                  }}
                >
                </View>
              </Animated.View>
            </PinchGestureHandler>
          </Animated.View>
        </RotationGestureHandler>
      </Animated.View>
    </PanGestureHandler>
2

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.