Pinch to zoom with GH and reanimated

[leurs247]

I'm trying to use react-native-gesture-handler and react-native-reanimated to zoom an image.

My code so far:

  const scale = useSharedValue(1);
  const prevScale = useSharedValue(1);

  const pinchGestureEvent = useAnimatedGestureHandler({
    // State.START
    onStart: (event, ctx) => {
      prevScale.value = 1;
    },
    // State.ACTIVE
    onActive: (event, ctx) => {
      let p = event.scale;
      let p2 = p - prevScale.value;
      if (p2 > 0 && p2 > 0.01) {
        prevScale.value = p2;
        scale.value = Math.min(p + 0.01, 1)
      } else if (p2 < 0 && p2 < -0.01) {
        prevScale.value = p;
        scale.value = Math.max(p - 0.01, 0);
      }
    },
    // State.END
    onEnd: (event, ctx) => {
      prevScale.value = 1;
    }
  });

  const animatedStyle = useAnimatedStyle(() => {
    return {
      transform: [{ scale: scale.value }],
    };
  });
 
  return (
    <PinchGestureHandler onGestureEvent={pinchGestureEvent} enabled={true}>
      <Animated.View style={[{ width: 100, height: 100, backgroundColor: 'red' }, animatedStyle]} />
    </PinchGestureHandler>
  );

What I want to achieve is that the scale is preserved upon next scale changes. This code does not work. Does someone has an example to achieve this?

Thanks in advance!