Camera Preview Not Showing (Blank Screen) on iOS

[mmenacer]

Describe the Bug

The camera preview does not display (blank screen) when using <Camera> from react-native-camera-kit on iOS. Barcode scanning does not work, and Xcode logs indicate rendering errors. This issue persists on a physical iOS device.

---

To Reproduce

Steps to reproduce the behavior:

1. Install the package:

   yarn add react-native-camera-kit
   cd ios && pod install
   yarn start --reset-cache
   

2. Add camera permissions to Info.plist:

   <key>NSCameraUsageDescription</key>
   <string>We need access to your camera for barcode scanning.</string>
   

3. Implement the component:

   import { Camera } from 'react-native-camera-kit';
   
   return (
     <Camera
       style={{ flex: 1 }}
       cameraType="back"
       scanBarcode={true}
       onReadCode={(event) => console.log('Scanned:', event.nativeEvent.codeStringValue)}
       showFrame={true}
       laserColor="red"
       frameColor="blue"
     />
   );
   

4. Run on a real iOS device.
5. The screen remains blank, with no camera preview or barcode scanning.
6. The Torch and the barcode however works fine when I try to scan without saying the barcode. Only a white screen instead of Camera.

---

Expected Behavior

• The camera preview should be visible.
• Barcode scanning should work as expected.
• The component should mount without errors.

---

Screenshots

---

• Device: iPhone 15 pro
• OS: iOS 18.3.1

---

Additional Context

• Xcode Logs:

  nw_socket_handle_socket_event [C12:1] Socket SO_ERROR [61: Connection refused]
  CGBitmapContextCreate: unsupported parameter combination: NULL colorspace
  react_native_expect failure: value.hasType<std::vector<RawValue>>()
  

• What I’ve Tried:

  • Verified Info.plist contains correct camera permissions.
  • Ran the app in Release Mode (react-native run-ios --configuration Release).
  • Restarted Metro Bundler (yarn start --reset-cache).
  • Ran on a real iOS device.
  • Added onError={(err) => console.error("Camera Error:", err)} but no additional logs appeared.

• Works fine on Android.

Could this be an issue with the latest iOS update or package compatibility?

[scarlac]

You likely need to grant the app the permission. It's not enough to declare it. You must prompt to get it from the user: https://github.com/teslamotors/react-native-camera-kit?tab=readme-ov-file#permissions

[Sotatek-Namdo2]

same issue on react-native 0.78.0

[mmenacer]

@Sotatek-Namdo2 @scarlac we found out what is the problem.

We initially used PNPM to install the package, but switching to YARN or NPM resolved the issue

[Sotatek-Namdo2]

how can I resolve this issue. I'm using react-native-camera-kit 14.2.0. I'm using yarn.

[mmenacer]

@Sotatek-Namdo2 as @scarlac said, you need to grant the app the permission. It's not enough to declare it. You need to prompt it to get it from the user.

[mmenacer]

@scarlac you can close this issue because it is a problem within PNPM and the package works fine using Yarn/ NPM

[victorheritage]

I'm facing the exact same issue. 0.78 react native.

[srinu6]

After giving permissions, for a small period of time, I am seeing this white screen, then the camera is visible on iOS devices.

[ivosw]

I’m experiencing the same issue on React Native 0.77 with the New Architecture enabled on iOS.

Although it might appear to be a permissions-related problem, it actually stems from a different cause.

🔍 Root Cause Analysis

In RealCamera.swift, a view is created to display the camera. Initially, the frame size is set to 0, which effectively renders nothing.

Later, once the camera starts, the view size is meant to be updated in this function:

swift

@objc public func updateSubviewsBounds(_ frame: CGRect) {
    camera.previewView.frame = bounds
    scannerInterfaceView.frame = bounds
    // If frame size changes, update the scanner
    camera.update(scannerFrameSize: showFrame ? scannerInterfaceView.frameSize : nil)
    focusInterfaceView.frame = bounds
    ratioOverlayView?.frame = bounds
}

This function is triggered via the reactSetFrame hook:

override public func reactSetFrame(_ frame: CGRect) {
    super.reactSetFrame(frame)
    self.updateSubviewsBounds(frame)
}

⚠️ Observed Behavior Problem: The reactSetFrame hook is never called, so the frame remains zero, and the camera preview is invisible.

✅ Workaround I was able to make it work by overriding layoutSubviews, which is consistently called:

override public func layoutSubviews() {
    super.layoutSubviews()
    print("🟣 layoutSubviews called")
    self.updateSubviewsBounds(self.bounds)
}

Adding this ensures the subviews are sized correctly and the camera preview becomes visible.

❓ Open Question Why is reactSetFrame never invoked under the New Architecture?

I’m trying to understand whether:

This is an issue specific to my project setup (e.g., view hierarchy, initialization timing, bridging), or

The library needs to be patched to be compatible with the New Architecture, perhaps by relying on layoutSubviews instead of reactSetFrame.

Has anyone else encountered this? Is there an established best practice or a recommended migration strategy for handling view sizing in this context?

Any insights into why reactSetFrame is bypassed under the New Architecture would be greatly appreciated.

[gbalduzzi]

I'm having the same issue.

I can confirm what said by @ivosw, because QR code scanning works even though no preview is shown.

[sommcz]

same issue here, RN 0.80.2, new architecture, iOS, latest lib version 1.5.1. Mounting component after permission is given (usign react-native-permissions), but still showing only blank screen. No errror in console or xcode.

https://github.com/teslamotors/react-native-camera-kit/pull/731 works ok!