How to properly change expo-camera zoom value with PinchGestureHandler

How to / Third Party Tooling
,
1

SDK Version: 43.0.0
Platforms: Android / iOS
Snack with the example: expo camera zoom - Snack

Hi, I’m using the expo-camera module and I’d like to add zoom in/out feature with the PinchGestureHandler, but I can’t find any information on how to properly achieve this.

I’ve found some tutorials but they use Animation module to zoom in/out images or views, but I don’t want to do that, I just want to change the zoom value (between 0 and 1).

I’m trying with this code but I’m pretty sure this not the best way to do it:

import React, { useState, useEffect } from 'react';
import { View, Text, Dimensions, SafeAreaView } from 'react-native';
import { PinchGestureHandler } from 'react-native-gesture-handler';
import { Camera } from 'expo-camera';

const windowWidth = Dimensions.get('window').width;

export default function App() {
  const [camType, setcamType] = useState(Camera.Constants.Type.back);
  const [hasPermission, sethasPermission] = useState(null);
  const [zoom, setZoom] = useState(0);

  useEffect(() => {
    (async () => {
      const { status } = await Camera.requestCameraPermissionsAsync();
      sethasPermission(status === 'granted');
    })();
  }, []);

  if (hasPermission === null) {
    return <View />;
  } else if (!hasPermission) {
    <Text>Access denied!</Text>;
  }

  /* I don't know how to properly change the zoom value
    so I've created this simple function */
  const changeZoom = (event) => {
    if (event.nativeEvent.scale > 1 && zoom < 1) {
      setZoom(zoom + 0.005);
    }
    if (event.nativeEvent.scale < 1 && zoom > 0) {
      setZoom(zoom - 0.005);
    }
  };

  return (
    <SafeAreaView style={{ flex: 1, justifyContent: 'center' }}>
      <PinchGestureHandler onGestureEvent={(event) => changeZoom(event)}>
        <View style={{ flex: 1, maxHeight: windowWidth }}>
          <Camera
            style={{ flex: 1, maxHeight: windowWidth }}
            ratio="1:1"
            zoom={zoom}
            type={camType}
          />
        </View>
      </PinchGestureHandler>
    </SafeAreaView>
  );
}

Any suggestion or solution would be appreciated. Regards.

2

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