4

I am using "react-native-vision-camera": "^2.15.4", in my Expo project (SDK 46, RN, 0.69.9). The expo-camera module doesn't support different lenses, hence the switch.

When i take a picture in either portrait or landscape orientation, the photo is showing as photo.metadata.Orientation: 6

This surprises me.

enter image description here enter image description here

I want the preview of the image, after the photo has been taken, to be rotated so that it's horizontal and easier to view. It also saves vertically so on the web, it's also rotated incorrectly.

<Camera
  // Do not add enableZoomGesture since using the Animated lib
  // enableZoomGesture
  ref={cameraRef}
  photo
  device={device}
  isActive={isActive}
  format={formats?.[0]}
  animatedProps={animatedProps}
  orientation={'portrait'}
/>

Apparently, the orientation prop in the Camera component is also not functioning as expected.

Why is the orientation the same on the metadata? How can I get the photo to rotate correctly after it's been taken, so it's saved for viewing in a horizontal "portrait" orientation?


EDIT I have since tried the react-native-orientation-locker. And while it doesn't lock the image being captured, I can at least customize the image now after the capture event:

const capturePhoto = async () => {
    if (cameraRef?.current && !snapping) {
      setSnapping(true);
      const photo = await cameraRef.current.takePhoto({
        flash: flashMode,
      });

      let rotation = 0;

      if (orientation === OrientationType['LANDSCAPE-LEFT']) {
        rotation = -90;
      } else if (orientation === OrientationType['LANDSCAPE-RIGHT']) {
        rotation = 90;
      } else if (orientation === OrientationType['PORTRAIT-UPSIDEDOWN']) {
        rotation = 180;
      }

     // now use `expo-image-manipulator`
      const photoWithOrientation = await manipulateImage({
        imageUri: photo.path,
        actions: [{ rotate: rotation }],
        saveOptions: {
          compress: 1,
        },
      });

      handleSaveAsset([
        {
          path: photoWithOrientation.uri,
          width: photoWithOrientation.width,
          height: photoWithOrientation.height,
          isRawPhoto: false,
        },
      ]);
    }
  };

Is there a way to remove this logic so the image is always "vertical" on review, or is this the correct approach?

Phil Lucks
  • 2,704
  • 6
  • 31
  • 57

0 Answers0