🐛 Bug: CameraView Event Name Errors & QR Code Scan Timeout after Upgrading to RN 0.78.2

[sanjayradadiya]

What's happening?

After upgrading React Native and related packages, the app throws multiple event name errors related to CameraView. Additionally, QR code scanning fails with an ImageReader timeout.

🧩 Current Setup (After Upgrade)

{
  "react": "19.0.0",
  "react-native": "0.78.2",
  "react-native-vision-camera": "4.6.4",
  "react-native-worklets-core": "1.5.0"
}

🕐 Previous Working Setup

{
  "react": "18.1.0",
  "react-native": "0.71.1",
  "react-native-vision-camera": "3.8.2",
  "react-native-worklets-core": "0.3.0"
}

Reproduceable Code

Create a new React Native 0.78.2 project and setup react-native-vision-camera Run the app — the error appears immediately.

Relevant log output

Android logcat

E  Direct event name for 'CameraView' doesn't correspond to the naming convention, expected 'topEventName'->'onEventName', got 'topCameraStarted'->'onStarted'
E  Direct event name for 'CameraView' doesn't correspond to the naming convention, expected 'topEventName'->'onEventName', got 'topCameraError'->'onError'
E  Direct event name for 'CameraView' doesn't correspond to the naming convention, expected 'topEventName'->'onEventName', got 'topCameraViewReady'->'onViewReady'
E  Direct event name for 'CameraView' doesn't correspond to the naming convention, expected 'topEventName'->'onEventName', got 'topCameraAverageFpsChanged'->'onAverageFpsChanged'
E  Direct event name for 'CameraView' doesn't correspond to the naming convention, expected 'topEventName'->'onEventName', got 'topCameraShutter'->'onShutter'
E  Direct event name for 'CameraView' doesn't correspond to the naming convention, expected 'topEventName'->'onEventName', got 'topCameraOutputOrientationChanged'->'onOutputOrientationChanged'
E  Direct event name for 'CameraView' doesn't correspond to the naming convention, expected 'topEventName'->'onEventName', got 'topCameraInitialized'->'onInitialized'
E  Direct event name for 'CameraView' doesn't correspond to the naming convention, expected 'topEventName'->'onEventName', got 'topCameraCodeScanned'->'onCodeScanned'
E  Direct event name for 'CameraView' doesn't correspond to the naming convention, expected 'topEventName'->'onEventName', got 'topCameraPreviewOrientationChanged'->'onPreviewOrientationChanged'
E  Direct event name for 'CameraView' doesn't correspond to the naming convention, expected 'topEventName'->'onEventName', got 'topCameraStopped'->'onStopped'
E  Direct event name for 'CameraView' doesn't correspond to the naming convention, expected 'topEventName'->'onEventName', got 'topCameraPreviewStarted'->'onPreviewStarted'
E  Direct event name for 'CameraView' doesn't correspond to the naming convention, expected 'topEventName'->'onEventName', got 'topCameraPreviewStopped'->'onPreviewStopped


when attempting to scan a QR code:

[ImageReader-640x480f23m4-29343-0](id:729f00000003,api:4,p:1157,c:29343) waitForFreeSlotThenRelock: timeout [mDequeueTimeout=1000ms]

Camera Device

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

Device

samsung SM-M146B

VisionCamera Version

4.6.4

Can you reproduce this issue in the VisionCamera Example app?

I didn't try (⚠️ your issue might get ignored & closed if you don't try this)

Additional information

• [ ] I am using Expo
• [x] 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.

[maintenance-hans[bot]]

Guten Tag, Hans here! 🍻

Thanks for reporting ze issue. It looks like you have provided quite a lot of details, which is very helpful!

However, you should try reproducing ze issue in ze VisionCamera Example app as well. This will help us understand if it’s specific to your setup or a more general problem. Also, checking for any updates on ze library might also help.

If ze problem persists, be sure to let us know how it goes!

And remember, if you want ze maintainers to give your issue more attention, consider sponsoring ze project here. Cheers!

Note: If you think I made a mistake, please ping @mrousavy to take a look.

[sanjayradadiya]

The VisionCamera example uses an older version of React Native (0.75.4).

[MarcelinaZiolkiewicz]

Same issue here:

{ "react": "18.3.1", "react-native": "0.76.7", "react-native-vision-camera": "4.6.3", }

[Aure77]

Same issue with RN 0.79

[PABourdais]

Just faced the same issue using an Android emulator API35

{
  "react": "18.3.1",
  "react-native": "0.77.2",
  "react-native-vision-camera": "4.5.3",
}

[CaptainJeff]

Any update on this? Getting the same issue

[AndreaGMicroel]

Hi, I am encountering the following error when using React Native 0.77 and [email protected]: E Direct event name for 'CameraView' doesn't correspond to the expected format, got 'topCameraStarted'->'onStarted'

This seems to be caused by changes in how React Native's new architecture (or recent RN versions) handles event naming conventions, expecting camelCase names without the top prefix (e.g., onStarted instead of topCameraStarted).

Here is my proposed fix for the event names in the native code.

1) Original File: node_modules/react-native-vision-camera/android/src/main/java/com/mrousavy/camera/react/Events.kt

package com.mrousavy.camera.react

import com.facebook.react.bridge.Arguments
import com.facebook.react.bridge.WritableMap
import com.facebook.react.uimanager.events.Event

class CameraInitializedEvent(surfaceId: Int, viewId: Int) : Event<CameraInitializedEvent>(surfaceId, viewId) {
  override fun getEventName() = EVENT_NAME
  override fun getEventData(): WritableMap = Arguments.createMap()
  companion object {
    const val EVENT_NAME = "topCameraInitialized"
  }
}

class CameraStartedEvent(surfaceId: Int, viewId: Int) : Event<CameraStartedEvent>(surfaceId, viewId) {
  override fun getEventName() = EVENT_NAME
  override fun getEventData(): WritableMap = Arguments.createMap()
  companion object {
    const val EVENT_NAME = "topCameraStarted"
  }
}

class CameraStoppedEvent(surfaceId: Int, viewId: Int) : Event<CameraStoppedEvent>(surfaceId, viewId) {
  override fun getEventName() = EVENT_NAME
  override fun getEventData(): WritableMap = Arguments.createMap()
  companion object {
    const val EVENT_NAME = "topCameraStopped"
  }
}

class CameraPreviewStartedEvent(surfaceId: Int, viewId: Int) : Event<CameraPreviewStartedEvent>(surfaceId, viewId) {
  override fun getEventName() = EVENT_NAME
  override fun getEventData(): WritableMap = Arguments.createMap()
  companion object {
    const val EVENT_NAME = "topCameraPreviewStarted"
  }
}

class CameraPreviewStoppedEvent(surfaceId: Int, viewId: Int) : Event<CameraPreviewStoppedEvent>(surfaceId, viewId) {
  override fun getEventName() = EVENT_NAME
  override fun getEventData(): WritableMap = Arguments.createMap()
  companion object {
    const val EVENT_NAME = "topCameraPreviewStopped"
  }
}

class CameraShutterEvent(surfaceId: Int, viewId: Int, private val data: WritableMap) : Event<CameraShutterEvent>(surfaceId, viewId) {
  override fun getEventName() = EVENT_NAME
  override fun getEventData() = data
  companion object {
    const val EVENT_NAME = "topCameraShutter"
  }
}

class CameraOutputOrientationChangedEvent(surfaceId: Int, viewId: Int, private val data: WritableMap) :
  Event<CameraOutputOrientationChangedEvent>(surfaceId, viewId) {
  override fun getEventName() = EVENT_NAME
  override fun getEventData() = data
  companion object {
    const val EVENT_NAME = "topCameraOutputOrientationChanged"
  }
}

class CameraPreviewOrientationChangedEvent(surfaceId: Int, viewId: Int, private val data: WritableMap) :
  Event<CameraPreviewOrientationChangedEvent>(surfaceId, viewId) {
  override fun getEventName() = EVENT_NAME
  override fun getEventData() = data
  companion object {
    const val EVENT_NAME = "topCameraPreviewOrientationChanged"
  }
}

class AverageFpsChangedEvent(surfaceId: Int, viewId: Int, private val data: WritableMap) : Event<CameraShutterEvent>(surfaceId, viewId) {
  override fun getEventName() = EVENT_NAME
  override fun getEventData() = data
  companion object {
    const val EVENT_NAME = "topCameraAverageFpsChanged"
  }
}

class CameraErrorEvent(surfaceId: Int, viewId: Int, private val data: WritableMap) : Event<CameraErrorEvent>(surfaceId, viewId) {
  override fun getEventName() = EVENT_NAME
  override fun getEventData() = data
  companion object {
    const val EVENT_NAME = "topCameraError"
  }
}

class CameraViewReadyEvent(surfaceId: Int, viewId: Int) : Event<CameraViewReadyEvent>(surfaceId, viewId) {
  override fun getEventName() = EVENT_NAME
  override fun getEventData(): WritableMap = Arguments.createMap()
  companion object {
    const val EVENT_NAME = "topCameraViewReady"
  }
}

class CameraCodeScannedEvent(surfaceId: Int, viewId: Int, private val data: WritableMap) :
  Event<CameraCodeScannedEvent>(surfaceId, viewId) {
  override fun getEventName() = EVENT_NAME
  override fun getEventData() = data
  companion object {
    const val EVENT_NAME = "topCameraCodeScanned"
  }
}

2) The Fix: Event Name Replacement. The fix involves changing the EVENT_NAME constants to match the expected format. I replaced the following strings in Events.kt:

"topCameraInitialized" -> "onInitialized"
"topCameraStarted" -> "onStarted"
"topCameraStopped" -> "onStopped"
"topCameraError" -> "onError"
"topCameraViewReady" -> "onViewReady"
"topCameraStopped" -> "onStopped"
"topCameraOutputOrientationChanged" -> "onOutputOrientationChanged"
"topCameraPreviewOrientationChanged" -> "onPreviewOrientationChanged"
"topCameraCodeScanned" -> "onCodeScanned"

3) Resulting Events.kt Code

package com.mrousavy.camera.react

import com.facebook.react.bridge.Arguments
import com.facebook.react.bridge.WritableMap
import com.facebook.react.uimanager.events.Event

class CameraInitializedEvent(surfaceId: Int, viewId: Int) : Event<CameraInitializedEvent>(surfaceId, viewId) {
  override fun getEventName() = EVENT_NAME
  override fun getEventData(): WritableMap = Arguments.createMap()
  companion object {
    const val EVENT_NAME = "onInitialized"
  }
}

class CameraStartedEvent(surfaceId: Int, viewId: Int) : Event<CameraStartedEvent>(surfaceId, viewId) {
  override fun getEventName() = EVENT_NAME
  override fun getEventData(): WritableMap = Arguments.createMap()
  companion object {
    const val EVENT_NAME = "onStarted"
  }
}

class CameraStoppedEvent(surfaceId: Int, viewId: Int) : Event<CameraStoppedEvent>(surfaceId, viewId) {
  override fun getEventName() = EVENT_NAME
  override fun getEventData(): WritableMap = Arguments.createMap()
  companion object {
    const val EVENT_NAME = "onStopped"
  }
}

class CameraPreviewStartedEvent(surfaceId: Int, viewId: Int) : Event<CameraPreviewStartedEvent>(surfaceId, viewId) {
  override fun getEventName() = EVENT_NAME
  override fun getEventData(): WritableMap = Arguments.createMap()
  companion object {
    const val EVENT_NAME = "onPreviewStarted"
  }
}

class CameraPreviewStoppedEvent(surfaceId: Int, viewId: Int) : Event<CameraPreviewStoppedEvent>(surfaceId, viewId) {
  override fun getEventName() = EVENT_NAME
  override fun getEventData(): WritableMap = Arguments.createMap()
  companion object {
    const val EVENT_NAME = "onPreviewStopped"
  }
}

class CameraShutterEvent(surfaceId: Int, viewId: Int, private val data: WritableMap) : Event<CameraShutterEvent>(surfaceId, viewId) {
  override fun getEventName() = EVENT_NAME
  override fun getEventData() = data
  companion object {
    const val EVENT_NAME = "onShutter"
  }
}

class CameraOutputOrientationChangedEvent(surfaceId: Int, viewId: Int, private val data: WritableMap) :
  Event<CameraOutputOrientationChangedEvent>(surfaceId, viewId) {
  override fun getEventName() = EVENT_NAME
  override fun getEventData() = data
  companion object {
    const val EVENT_NAME = "onOutputOrientationChanged"
  }
}

class CameraPreviewOrientationChangedEvent(surfaceId: Int, viewId: Int, private val data: WritableMap) :
  Event<CameraPreviewOrientationChangedEvent>(surfaceId, viewId) {
  override fun getEventName() = EVENT_NAME
  override fun getEventData() = data
  companion object {
    const val EVENT_NAME = "onPreviewOrientationChanged"
  }
}

class AverageFpsChangedEvent(surfaceId: Int, viewId: Int, private val data: WritableMap) : Event<CameraShutterEvent>(surfaceId, viewId) {
  override fun getEventName() = EVENT_NAME
  override fun getEventData() = data
  companion object {
    const val EVENT_NAME = "onAverageFpsChanged"
  }
}

class CameraErrorEvent(surfaceId: Int, viewId: Int, private val data: WritableMap) : Event<CameraErrorEvent>(surfaceId, viewId) {
  override fun getEventName() = EVENT_NAME
  override fun getEventData() = data
  companion object {
    const val EVENT_NAME = "onError"
  }
}

class CameraViewReadyEvent(surfaceId: Int, viewId: Int) : Event<CameraViewReadyEvent>(surfaceId, viewId) {
  override fun getEventName() = EVENT_NAME
  override fun getEventData(): WritableMap = Arguments.createMap()
  companion object {
    const val EVENT_NAME = "onViewReady"
  }
}

class CameraCodeScannedEvent(surfaceId: Int, viewId: Int, private val data: WritableMap) :
  Event<CameraCodeScannedEvent>(surfaceId, viewId) {
  override fun getEventName() = EVENT_NAME
  override fun getEventData() = data
  companion object {
    const val EVENT_NAME = "onCodeScanned"
  }
}

4) Applying the Fix with patch-package I used patch-package to save the correction for my local environment npx patch-package react-native-vision-camera This creates the patch file in the patches/ folder, ensuring the fix is applied automatically after any future npm install or yarn install command.