How to create a pinch to zoom camera app using reanimated 2 [REACT-NATIVE]

Question

I'm trying to create a react native camera app using reanimated 2 that enable the camera zoom, here's my code:

const scale = useSharedValue(1);

  const onGestureEvent = useAnimatedGestureHandler({
    onStart: (_, ctx) => {
      ctx.start = scale.value;
    },
    onActive: (event, ctx) => {
      scale.value = event.scale * ctx.start;
    },
  });

const animatedProps = useAnimatedProps(() => {
    return {
      zoom: scale.value / 1000,
    };
  });

  return (

      <PinchGestureHandler onGestureEvent={onGestureEvent}>
        <AnimatedCamera
          style={{ width, height }}
          animatedProps={animatedProps}
        />
      </PinchGestureHandler>
  );

But it doesn't work, where's the error?

Answer 1

Try this:

const CONTAINER_WIDTH = SCREEN_WIDTH;// edit this to whatever you want
export const clamp = (value, lowerBound, upperBound) => {
     "worklet";
     return Math.min(Math.max(lowerBound, value), upperBound);
};

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

const pinchGestureHandle= useAnimatedGestureHandler(
                {
                    onActive: (event) => {
                        scale.value = clamp(event.scale, 0.5, 2);
                        focalX.value = event.focalX;
                        focalY.value = event.focalY;
                    },
                    onEnd: () => {
                        scale.value = withTiming(1, {
                            duration: 500,
                            easing: Easing.inOut(Easing.ease),
                        });
                    },
                },
                [],
            );
            
        const animatedStyles = useAnimatedStyle(() => {
            return {
                transform: [
                    {translateX: focalX.value},
                    {translateY: focalY.value},
                    {translateX: -CONTAINER_WIDTH / 2},
                    {translateY: -slHeight.value / 2},
                    {scale: scale.value},
                    {translateX: -focalX.value},
                    {translateY: -focalY.value},
                    {translateX: CONTAINER_WIDTH / 2},
                    {translateY: slHeight.value / 2},
                ],
            };
        });
        
        return <Animated.View style={animatedStyles} />