Instagram Stickers Rotation and Scaling Multiple Elements

[TomAtterton]

I’m building something similar to Instagram or TikTok stories where users can add, scale, and rotate elements on the screen. Currently, I’m using hitSlop manipulation to handle active panning states, but this feels clunky and not exact enough.

From observing Instagram/TikTok, it seems they use the entire screen as a gesture recognizer. For example, you can pinch or rotate from anywhere, and the nearest/selected element responds to that gesture.

How can I implement something similar? Specifically:
1. Detect and manipulate a specific element while using gestures across the entire screen.
2. Support pinch-to-zoom and rotation gestures seamlessly.

I’d love to hear ideas or approaches to make this work more efficiently!

https://www.youtube.com/watch?v=QaS81gjrlTA Somebody doing something similar a couple years ago

[Glazzes]

Someone did ask for the same in my library's issues, give it a look and see if it works for you Glazzes/react-native-zoom-toolkit#72 (comment)

[TomAtterton]

Thanks this is a really good example ( a lot cleaner than mine ) but it's not 100% what I am looking for. I am really trying to identically simulate the touch recognition so i've managed to get a lot clooser now when active i grow a bounding box so you can rotate and scale with your finger where ever it is. The problem I am trying to achieve now is how the hell instagram manages to scale when you pinch or rotate you fingers and you're further away from the image as if i keep add padding you won't be able to touch anything else :P

`
  const containerAnimatedStyle = useAnimatedStyle(() => ({
    zIndex: zIndex.value,
    position: 'absolute',
    top: 0,
    left: 0,
    height: active.value ? '100%' : 0,
    width: active.value ? '100%' : 0,
  }));

  const imageAnimatedStyle = useAnimatedStyle(() => ({
    zIndex: zIndex.value,
    height: imageSize,
    width: imageSize,
    transform: [
      { translateX: xPos.value - (imageSize * scale.value) / 2 },
      { translateY: yPos.value - (imageSize * scale.value) / 2 },
      { scale: scale.value },
      { rotate: `${rotation.value}rad` },
    ],
  }));

  const paddingValue = 20;

  const animatedContentStyle = useAnimatedStyle(() => ({
    position: 'absolute',
    height: imageSize,
    width: imageSize,
    transform: [
      { translateX: xPos.value - (imageSize * scale.value) / 2 },
      { translateY: yPos.value - (imageSize * scale.value) / 2 },
      {
        scale: scale.value * ((imageSize + paddingValue) / imageSize),
      },
      { rotate: `${rotation.value}rad` },
    ],
  }));

  return (
    <>
      <GestureDetector gesture={gestures}>
        {imageUrl && (
          <Animated.View style={containerAnimatedStyle}>
            <Animated.View style={animatedContentStyle} />
            <Animated.Image
              style={imageAnimatedStyle}
              source={isSticker ? imageUrl : { uri: imageUrl }}
              resizeMode="contain"
            />
          </Animated.View>
        )}
      </GestureDetector>
      <GuidingLines
        xPos={xPos}
        yPos={yPos}
        active={active}
        scale={scale}
        imageSize={imageSize}
        rotation={rotation}
      />
      <DeleteButton
        xPos={fingerX}
        yPos={fingerY}
        active={active}
        handleDelete={handleRemoveImage}
      />
    </>
  );
};`