How can I use translate and rotate together?

[kadiraydinli]

Description

Hello, I want to drag and drop, rotate and scale in an Animated.View. Drag and drop everything works correctly before rotating, drag and drop after rotating the object does not work correctly. How can I solve this problem?

Code

const translationX = useRef(new Value(0)).current
const offsetX = useRef(new Value(0)).current
const translationY = useRef(new Value(0)).current
const offsetY = useRef(new Value(0)).current

const rotateRef = useRef(new Value<number>(0)).current
const scaleRef = useRef(new Value<number>(1)).current
const offsetRotate = useRef(new Value<number>(0)).current
const offsetScale = useRef(new Value<number>(1)).current

const handlePan = event([
    {
      nativeEvent: ({ translationX: x, translationY: y, state }) =>
        block([
          set(translationX, add(x, offsetX)),
          set(translationY, add(y, offsetY)),
          cond(eq(state, State.END), [
            set(offsetX, add(offsetX, x)),
            set(offsetY, add(offsetY, y)),
          ]),
        ]),
    },
  ])

const handleRotate = event([
    {
      nativeEvent: ({ rotation: r, state }) =>
        block([
          set(rotateRef, add(r, offsetRotate)),
          cond(eq(state, State.END), [set(offsetRotate, add(offsetRotate, r))]),
        ]),
    },
  ])

  const handleZoom = event([
    {
      nativeEvent: ({ scale: z, state }) =>
        block([
          cond(eq(state, State.ACTIVE), set(scaleRef, multiply(z, offsetScale))),
          cond(eq(state, State.END), [set(offsetScale, multiply(offsetScale, z))]),
        ]),
    },
  ])

return (
    <PanGestureHandler
      onGestureEvent={handlePan}
      onHandlerStateChange={handlePan}
      minDist={10}
      minPointers={1}
      maxPointers={2}
      avgTouches>
      <Animated.View
        style={{
          position: "absolute",
          backgroundColor: "red",
          transform: [
            { translateX: translationX },
            { translateY: translationY },
            { scale: scaleRef },
            { rotate: concat(rotateRef, 'rad') },
          ]
        }}>
        <RotationGestureHandler
          ref={rotationRef}
          simultaneousHandlers={pinchRef}
          onGestureEvent={handleRotate}
          onHandlerStateChange={handleRotate}>
          <Animated.View>
            <PinchGestureHandler
              ref={pinchRef}
              simultaneousHandlers={rotationRef}
              onGestureEvent={handleZoom}
              onHandlerStateChange={handleZoom}>
              <Animated.View style={{
                backgroundColor: backgroundColor,
                borderRadius: 8,
                width: 100,
                height: 100
              }}>
              </Animated.View>
            </PinchGestureHandler>
          </Animated.View>
        </RotationGestureHandler>
      </Animated.View>
    </PanGestureHandler>
  )

In fact, it works correctly when you give scaling with rotation to the innermost Animated.View, but you can still drag and drop in the outside view, ie in the red area. So I want to give them all to the outermost View.

<PanGestureHandler
      onGestureEvent={handlePan}
      onHandlerStateChange={handlePan}
      minDist={10}
      minPointers={1}
      maxPointers={2}
      avgTouches>
      <Animated.View
        style={{
          position: "absolute",
          backgroundColor: "red",
          transform: [
            { translateX: translationX },
            { translateY: translationY }
          ]
        }}>
        <RotationGestureHandler
          ref={rotationRef}
          simultaneousHandlers={pinchRef}
          onGestureEvent={handleRotate}
          onHandlerStateChange={handleRotate}>
          <Animated.View>
            <PinchGestureHandler
              ref={pinchRef}
              simultaneousHandlers={rotationRef}
              onGestureEvent={handleZoom}
              onHandlerStateChange={handleZoom}>
              <Animated.View style={{
                backgroundColor: backgroundColor,
                borderRadius: 8,
                width: 100,
                height: 100,
                transform: [
                  { scale: scaleRef },
                  { rotate: concat(rotateRef, 'rad') }
                ]
              }}>
              </Animated.View>
            </PinchGestureHandler>
          </Animated.View>
        </RotationGestureHandler>
      </Animated.View>
    </PanGestureHandler>

Thanks in advance

Package versions

• React: 16.13.1
• React Native: ^0.63.3
• React Native Gesture Handler: ^1.9.0