react-native-vision-camera distorted preview image

Question

I'm using the react-native-vision-camera library, but I simply can't set it up in a way that prevents the image from distorting. I would like to have the preview image appear in a small window on the screen. I have tried using an aspect ratio of 4/3 and fixed sizes as well, but something is always off. Could you help me?

  const device = useCameraDevice("front", {
    physicalDevices: [
      "wide-angle-camera",
    ],
  });
 return (
<View style={styles.border}>
  <Camera
    ref={camera}
    resizeMode={"cover"}
    style={styles.camera}
    photo={true}
    device={device}
    isActive={showCamera}
  />
</View>
  );
}

export default CameraMolecula;
const styles = StyleSheet.create({
  border: {
    borderColor: "grey",
    borderWidth: 5,
  },
  camera: {
    width: "80%",
    aspectRatio: 4 / 3,
  },
});

Answer 1

I was facing the same issue for some devices and I was able to fix it by updating camera style once camera is initialized, By defining a local state.

  const [isInitialized, setIsInitialized] = useState<boolean>(false);

  // the rest of your code

  <Camera
    ref={camera}
    resizeMode={"cover"}
    onInitialized={() => setIsInitialized(true)}
    style={isInitialized ? styles.camera : styles.cameraNotInitialized}
    photo={true}
    device={device}
    isActive={showCamera}
  />

Update the style for cameraNotInitialized as bellow

const styles = StyleSheet.create({
  border: {
    borderColor: "grey",
    borderWidth: 5,
  },
  camera: {
    width: "80%",
    aspectRatio: 4 / 3,
  },
  cameraNotInitialized: {
    flex: 0
  },
});