fix: Fix PreviewView being stretched

[mrousavy]

What

HUGE thanks to the GitHub sponsors who sponsored me to fix this bug! 💖

Fixes the PreviewView being stretched by awaiting the SurfaceHolder's size change before configuring the Camera session on Android.

This will delay the Camera session startup time by a bit (130ms on my Huawei P10 for first init, 20ms afterwards), so #2518 is becoming even more relevant now.

I am not sure if there is another way to do this, but it seems like we really need to wait for the Surface View to resize properly before configuring the Camera with it. Weird.

Also prevents the display from going to sleep while the Camera is active, as an addition to #2421

Changes

• Waits for the SurfaceView's Surface to actually change in size before configuring the Camera (fixes preview stretching)
• Flips getMaximumPreviewSize() dimensions to reflect sensor natural orientation
• Prevents the display from going to sleep while Camera is active (addition to fix: Prevent phone from going to sleep if Camera is active #2421)

Tested on

Related issues

• Fixes ❓ Preview stretched in my app but not in the example on same device #2311
• Fixes 🐛 Recorded video is stretched #452
• Fixes 🐛 Android video is dark & stretched on front camera #2107
• Fixes 🐛 Camera stretched on Android #2142
• Fixes ❓ Preview stretched in my app but not in the example on same device #2311
• Fixes 🐛 The camera's displayed image is flattened #2380

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
react-native-vision-camera	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Feb 7, 2024 10:19am

[e-vural]

@mrousavy Hi. Is this fix included in 3.9.0-beta.1? I installed beta version but this problem continue.

[mrousavy]

@e-vural no, it is no.

[e-vural]

@e-vural no, it is no.
Ok thanks. You are really doing perfect job!

[mrousavy]

This is now included in v3.9.0-beta.2 🚀

[e-vural]

Perfect! Tested and works fine. Thank you @mrousavy

[luicfrr]

@mrousavy I'm testing it on an old Galaxy J5 but image preview is in landscape while device is in portrait mode making preview horizontally stretched. I'm using front camera

[hungtrieu07]

Hi, I have an error: The camera showing in my app are stretching and dark in horizontal mode. I'm using the tablet named Samsung Tab A9+. My app are developed with React Native, this is my package.json:

{
  "name": "FaceDetectProject",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "lint": "eslint .",
    "start": "react-native start",
    "test": "jest"
  },
  "dependencies": {
    "@react-native-async-storage/async-storage": "^1.22.3",
    "@react-native-camera-roll/camera-roll": "^7.5.0",
    "@react-native-community/hooks": "^3.0.0",
    "@react-navigation/bottom-tabs": "^6.5.18",
    "@react-navigation/drawer": "^6.6.13",
    "@react-navigation/native": "^6.1.15",
    "@react-navigation/native-stack": "^6.9.23",
    "@reduxjs/toolkit": "^2.2.1",
    "@types/react-native-vector-icons": "^6.4.18",
    "axios": "^1.6.8",
    "iconsax-react-native": "^0.0.8",
    "moment": "^2.30.1",
    "query-string": "^9.0.0",
    "react": "18.2.0",
    "react-native": "0.73.4",
    "react-native-date-picker": "^4.4.1",
    "react-native-fs": "^2.20.0",
    "react-native-gesture-handler": "^2.15.0",
    "react-native-image-crop-picker": "^0.40.3",
    "react-native-image-size": "^1.1.6",
    "react-native-keyboard-aware-scroll-view": "^0.9.5",
    "react-native-photo-manipulator": "^1.2.9",
    "react-native-reanimated": "^3.8.0",
    "react-native-safe-area-context": "^4.9.0",
    "react-native-screens": "^3.29.0",
    "react-native-svg": "^15.1.0",
    "react-native-toast-message": "^2.2.0",
    "react-native-vector-icons": "^10.0.3",
    "react-native-vision-camera": "^3.9.1",
    "react-native-vision-camera-face-detector": "^1.3.5",
    "react-native-worklets-core": "^0.4.0",
    "react-navigation": "^5.0.0",
    "react-redux": "^9.1.0",
    "redux": "^5.0.1"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@babel/preset-env": "^7.20.0",
    "@babel/runtime": "^7.20.0",
    "@react-native/babel-preset": "0.73.21",
    "@react-native/eslint-config": "0.73.2",
    "@react-native/metro-config": "0.73.5",
    "@react-native/typescript-config": "0.73.1",
    "@types/react": "^18.2.6",
    "@types/react-test-renderer": "^18.0.0",
    "babel-jest": "^29.6.3",
    "eslint": "^8.19.0",
    "jest": "^29.6.3",
    "prettier": "2.8.8",
    "react-test-renderer": "18.2.0",
    "typescript": "5.0.4"
  },
  "engines": {
    "node": ">=18"
  }
}