🐛 Deformed preview image

[Hugo-Tek]

What's happening?

I just updated from v2.15.4 to v3.8.2, I upgraded to get access to the camera for iPhone 15. But now I have a strange image when I'm in my ScreenCam.

This is the preview of the picture (Sorry for the car):

This is the picture after it is taken :

My preview is deformed and I don't understand why. When I go to the front camera and I come back to the back Camera, the preview picture is fine.

I've tried adding resizeMode="contain", to see if it's a size issue, but nothing changes.

Reproduceable Code

const [isFrontPhoto, setIsFrontPhoto] = useState(false);
const camera = useRef<Camera>(null);
const device = useCameraDevice(isFrontPhoto ? 'front' : 'back');

<Camera
  ref={camera}
  photo
  style={sharedStyles.flex}
  device={device}
  isActive={isFocused}
  enableZoomGesture
  resizeMode="contain"
/>

Relevant log output

WARN  Non-serializable values were found in the navigation state. Check:

LoggedInStack > Camera > params.finallySetImages (Function)

This can break usage such as persisting and restoring state. This might happen if you passed non-serializable values such as function, class instances etc. in params. If you need to use components with callbacks in your options, you can use 'navigation.setOptions' instead. See https://reactnavigation.org/docs/troubleshooting#i-get-the-warning-non-serializable-values-were-found-in-the-navigation-state for more details. 
    at BaseNavigationContainer (http://localhost:8081/index.bundle//&platform=android&dev=true&minify=false&app=myapp&modulesOnly=false&runModule=true:203434:28)
    at ThemeProvider (http://localhost:8081/index.bundle//&platform=android&dev=true&minify=false&app=myapp&modulesOnly=false&runModule=true:208345:21)
    at NavigationContainerInner (http://localhost:8081/index.bundle//&platform=android&dev=true&minify=false&app=myapp&modulesOnly=false&runModule=true:208238:26)
    at RootNavigation (http://localhost:8081/index.bundle//&platform=android&dev=true&minify=false&app=myapp&modulesOnly=false&runModule=true:134936:29)
    at PortalProviderComponent (http://localhost:8081/index.bundle//&platform=android&dev=true&minify=false&app=myapp&modulesOnly=false&runModule=true:234636:33)
    at RNGestureHandlerRootView
    at GestureHandlerRootView
    at RNCSafeAreaProvider
    at SafeAreaProvider (http://localhost:8081/index.bundle//&platform=android&dev=true&minify=false&app=myapp&modulesOnly=false&runModule=true:238468:24)
    at App (http://localhost:8081/index.bundle//&platform=android&dev=true&minify=false&app=myapp&modulesOnly=false&runModule=true:106130:89)
    at LocaleProvider (http://localhost:8081/index.bundle//&platform=android&dev=true&minify=false&app=myapp&modulesOnly=false&runModule=true:323508:41)
    at AuthProvider (http://localhost:8081/index.bundle//&platform=android&dev=true&minify=false&app=myapp&modulesOnly=false&runModule=true:213896:41)
    at QueryClientProvider (http://localhost:8081/index.bundle//&platform=android&dev=true&minify=false&app=myapp&modulesOnly=false&runModule=true:212744:23)
    at PersistQueryClientProvider (http://localhost:8081/index.bundle//&platform=android&dev=true&minify=false&app=myapp&modulesOnly=false&runModule=true:338538:22)
    at ProvidersWrapper (http://localhost:8081/index.bundle//&platform=android&dev=true&minify=false&app=myapp&modulesOnly=false&runModule=true:106160:91)
    at ReactNativeProfiler (http://localhost:8081/index.bundle//&platform=android&dev=true&minify=false&app=myapp&modulesOnly=false&runModule=true:127162:36)
    at RCTView
    at View (http://localhost:8081/index.bundle//&platform=android&dev=true&minify=false&app=myapp&modulesOnly=false&runModule=true:47073:43)
    at __Sentry.TouchEventBoundary (http://localhost:8081/index.bundle//&platform=android&dev=true&minify=false&app=myapp&modulesOnly=false&runModule=true:128534:36)
    at RootApp
    at RCTView
    at View (http://localhost:8081/index.bundle//&platform=android&dev=true&minify=false&app=myapp&modulesOnly=false&runModule=true:47073:43)
    at RCTView
    at View (http://localhost:8081/index.bundle//&platform=android&dev=true&minify=false&app=myapp&modulesOnly=false&runModule=true:47073:43)
    at AppContainer (http://localhost:8081/index.bundle//&platform=android&dev=true&minify=false&app=myapp&modulesOnly=false&runModule=true:46954:36)
    at myapp(RootComponent) (http://localhost:8081/index.bundle//&platform=android&dev=true&minify=false&app=myapp&modulesOnly=false&runModule=true:85106:28)

Camera Device

{
  "formats": [],
  "sensorOrientation": "landscape-right",
  "hardwareLevel": "limited",
  "maxZoom": 4,
  "minZoom": 1,
  "maxExposure": 20,
  "supportsLowLightBoost": false,
  "neutralZoom": 1,
  "physicalDevices": [
    "wide-angle-camera"
  ],
  "supportsFocus": true,
  "supportsRawCapture": false,
  "isMultiCam": false,
  "minFocusDistance": 5,
  "minExposure": -20,
  "name": "BACK (0)",
  "hasFlash": true,
  "hasTorch": true,
  "position": "back",
  "id": "0"
}

Device

Samsung Galaxy A32

VisionCamera Version

3.8.2

Can you reproduce this issue in the VisionCamera Example app?

No, I cannot reproduce the issue in the Example app

Additional information

• [ ] I am using Expo
• [ ] I have enabled Frame Processors (react-native-worklets-core)
• [X] I have read the Troubleshooting Guide
• [X] I agree to follow this project's Code of Conduct
• [X] I searched for similar issues in this repository and found none.

[theopomies]

Hi, I have a similar issue. They shipped a fix that worked for many people, you might want to try with version 3.9.0-beta.3. For me it didn't work however.

[nica0012]

Seems like this is a known issue by a few people recently. I too am experiencing this on Android (IOS works fine)

I will try 3.9.0-BETA.3 and report back.

[josesanchis16]

Same error here using Google Pixel 2XL

[nica0012]

3.9.0-BETA.3 did not work either. (I am testing with a Samsung A14)

[grevtsovna]

I have the same issue

[tomerh2001]

Same here. Pixel 7 Pro

[anurbecirovic]

Same Samsung s10+

[mrousavy]

Created a PR to fix this: https://github.com/mrousavy/react-native-vision-camera/pull/2564 💪

[mrousavy]

I think I fixed this now. I don't have a device with a different sensor orientation than landscapeLeft here to test it, so could you guys please test if v3.9.0-beta.5 fixed the issue for you guys? :)

[anurbecirovic]

I can confirm it's working great on S10+ with 3.9.0-beta.3 when I tested. Thank you 🙌

[mrousavy]

Awesome, quite important to fix such a critical bug 💪 If you appreciate my time and dedication, please consider sponsoring me on GitHub!