takePictureAsync: expected a Camera component

[nosuchip]

Bug Report

To Do First

• Did you try latest release?
• Did you try master?
• Did you look for existing matching issues?

Related Modules
RNCamera

Platforms
Android

Versions

• Android: API 27
• react-native-camera: 1.4.1
• react-native: 0.57.4
• react:16.6.0-alpha.8af6728
  react-navigation: 2.18.2

Description/Current Behaviour
Code below failed on either Android emulator or Android phone in camera click handler

        <View style={styles.containerCenter}>
          <RNCamera
            ref={ref => { this.camera = ref; }}
            style = {styles.cameraPreview}
            type={RNCamera.Constants.Type.back}
            flashMode={RNCamera.Constants.FlashMode.on}
            permissionDialogTitle={'Permission to use camera'}
            permissionDialogMessage={'We need your permission to use your camera phone'}
            onGoogleVisionBarcodesDetected={({ barcodes }) => {
              console.log(barcodes)
            }}
          />

          <View style={{flex: 0, flexDirection: 'row', justifyContent: 'center',}}>
            <TouchableOpacity onPress={this.handleTakePicture.bind(this)} style = {styles.cameraCapture} >
              <Text style={{fontSize: 14}}> SNAP </Text>
            </TouchableOpacity>
          </View>
        </View>

  async handleTakePicture() {
    if (this.camera) {
      const hasCameraPermissions = await this.checkCameraPermission();
      if (!hasCameraPermissions) return;

      try {
        const options = {quality: 0.5, base64: true, forceUpOrientation: true, fixOrientation: true };
        const data = await this.camera.takePictureAsync(options);
        console.log(data.uri);
      } catch (error) {
        console.log('Picture error:', error);
      }
    }
  }

Error message:

Picture error: Error: takePictureAsync: Expected a Camera component
    at createErrorFromErrorData (NativeModules.js:146)
    at NativeModules.js:95
    at MessageQueue.__invokeCallback (MessageQueue.js:397)
    at MessageQueue.js:127
    at MessageQueue.__guard (MessageQueue.js:297)
    at MessageQueue.invokeCallbackAndReturnFlushedQueue (MessageQueue.js:126)
    at debuggerWorker.js:72

Expected Behaviour
Picture taken

Steps to Reproduce

Does it work with Expo Camera?
I don't know.

Additionals

Love react-native-camera? Please consider supporting our collective: 👉 https://opencollective.com/react-native-camera/donate

[SimonErm]

I was not able to reproduce the error with the code you provided. Can you post the Logcat-Log?

[nosuchip]

@SimonErm sure. Here is logcat from the moment screen with code above opened till I click "snap" button:

11-20 09:37:01.826  1525 13250 I Camera2ClientBase: Camera 0: Opened. Client: com.rnexam (PID 17915, UID 10079)
11-20 09:37:01.885  1525 13250 I Camera2-Parameters: initialize: allowZslMode: 0 slowJpegMode 0
11-20 09:37:02.425  1416  1416 I boot-pipe: done populating /dev/random
11-20 09:37:04.803  1400  1400 W audio_hw_generic: Not supplying enough data to HAL, expected position 50539066 , only wrote 50387760
11-20 09:37:04.988  1652  1652 I ActivityManager: Killing 14272:com.android.defcontainer/u0a8 (adj 906): empty for 2517s
11-20 09:37:04.990  1652  1652 I ActivityManager: Killing 14064:com.android.keychain/1000 (adj 906): empty for 2527s
11-20 09:37:04.994  1652  1671 W zygote  : kill(-14272, 9) failed: No such process
11-20 09:37:05.039  1652  1671 I chatty  : uid=1000(system) ActivityManager identical 1 line
11-20 09:37:05.081  1652  1671 W zygote  : kill(-14272, 9) failed: No such process
11-20 09:37:05.081  1652  1671 I zygote  : Successfully killed process cgroup uid 10008 pid 14272 in 89ms
11-20 09:37:05.082  1652  1671 W zygote  : kill(-14064, 9) failed: No such process
11-20 09:37:05.082  1652  1671 I zygote  : Successfully killed process cgroup uid 1000 pid 14064 in 0ms
11-20 09:37:08.448  1400  4640 W audio_hw_generic: Not supplying enough data to HAL, expected position 50387957 , only wrote 50387760
11-20 09:37:08.452  1525 13250 E Camera2Client: takePicture: Camera 0: Cannot take picture without preview enabled

[nosuchip]

If it is related somehow I am operating on Linux Mint 18.3 x64. I thought that it is issue of emulator but on my Android phone (Xiaomi Mi6, Android 7.1.1) tap on this button does not makes any errors in logcat even.

[SirNeuman]

I get this issue also. Specifically when using RNCamera within a stackNavigator component from react-navigation after transitioning between screens. Doesn't happen all the time but happens a lot of the time. Not sure exactly how to work around this yet or if this is a bug with RNCamera or an issue with my implementation of the stackNavigator component. I don't get this problem when i use the switchNavigator from react-navigation however.

[jwaldrip]

I am also seeing this. My error in logcat is as follows:

02-07 10:44:22.080   928 27588 I CameraService: startCameraOps: Start camera ops, package name = com.gigsmart.worker, client UID = 10218
02-07 10:44:22.084   928 27588 D Camera3-Device: initialize: mInterfaceLock.lock()
02-07 10:44:22.093   928 27588 D Camera3-Device: initialize: mInterfaceLock.unlock()
02-07 10:44:22.094   928 27588 W Camera2-Parameters: initialize: Camera 1: Unknown preview format: 24
02-07 10:44:22.094   928 27588 W Camera2-Parameters: initialize: Camera 1: Unknown preview format: 25
02-07 10:44:22.094   928 27588 I Camera2-Parameters: initialize: allowZslMode: 1 slowJpegMode 0
02-07 10:44:22.095   928 27588 I CameraService: wouldEvictLocked:getCurrentCostLocked()=0, cost=51, totalCost=51, MaxCost=100
02-07 10:44:22.095   928 27588 I CameraService: wouldEvictLocked: owner=29266 priority-score=0, highestPriorityOwner=29266, highestPriority-score=0
02-07 10:44:22.100   928 27860 D Camera2-Parameters: set: paramString : video-size=1920x1080;preferred-preview-size-for-video=1920x1080;preview-size-values=1920x1080,1280x960,1280x720,800x600,720x480,640x480,640x360,512x288,432x288,384x384,352x288,320x240,256x154,176x144;video-size-values=3264x1836,2688x1512,2560x1920,2048x1536,2048x1152,1920x1080,1280x960,1280x720,800x600,720x480,640x480,640x360,512x288,432x288,384x384,352x288,320x240,256x154,176x144;preview-format=yuv420sp;preview-format-values=yuv420p,yuv420sp,;preview-frame-rate=30;preview-fps-range=7000,30000;preview-fps-range-values=(7000,7000),(15000,15000),(24000,24000),(7000,30000),(15000,30000),(30000,30000);preview-frame-rate-values=7,15,24,30;picture-size-values=3264x2448,3264x1836,3008x2256,2688x1512,2560x1920,2048x1536,2048x1152,1920x1080,1280x960,1280x720,800x600,720x480,640x480,640x360,512x288,432x288,384x384,352x288,320x240,256x154,176x144;picture-format=jpeg;picture-format-values=jpeg;jpeg-thumbnail-width=320;jpeg-thumbnail-height=240;jpeg-thumbnail-size-values=0x0,176x144,240x144,256x144,240
02-07 10:44:22.100   928 27860 D Camera2-Parameters: set: fpsRange(FPS_RANGE) : 7000,30000 , fpsSingle(FRAME_RATE) : 30
02-07 10:44:22.100   928 27860 D Camera2-Parameters: set: Preview FPS value is used from 'range'
02-07 10:44:22.100   928 27860 D Camera2-Parameters: set: Preview FPS range (7, 30)
02-07 10:44:22.102   928 27860 D Camera2Client: startPreview: E
02-07 10:44:22.102   928 27860 D Camera2Client: startPreviewL: state == 1, restart = 0
02-07 10:44:22.102   928 27860 D Camera2Client: startPreviewL: Camera 1: Don't have a valid preview window, but return ok
02-07 10:44:47.556   928 27860 E Camera2Client: autoFocus: Camera 1: Call autoFocus when preview is inactive (state = 2).

Javascript Error:

ExceptionsManager.js?0ae0:82 Unhandled promise rejection Error: takePictureAsync: Expected a Camera component
    at createErrorFromErrorData (NativeModules.js?47e7:146)
    at eval (NativeModules.js?47e7:95)
    at MessageQueue.__invokeCallback (MessageQueue.js?5e08:414)
    at eval (MessageQueue.js?5e08:127)
    at MessageQueue.__guard (MessageQueue.js?5e08:314)
    at MessageQueue.invokeCallbackAndReturnFlushedQueue (MessageQueue.js?5e08:126)
    at e (RNDebuggerWorker.js:1)

Some notes in our implementation:

1. We are running the camera in a Modal.
2. We are on React Native 58.3

[jwaldrip]

Also confirmed this is happening when the camera is the root component in an app with no state.

[Zaporozhec7]

I have same issue. App using react-native-navigation library for routing. React-native version 0.57.7.
And I have different behaviour on 2 physical devices:

• On device with Android 8.0.0 I have Promise that rejected immediatelly, with error same as posted by @nosuchip
• On device with Android 7.1.2, I have Promise that never resolved or rejected.

[jwaldrip]

@SimonErm bump. Any news here?

[n1ru4l]

@jwaldrip Please provide a reproduction repository.

[jwaldrip]

@n1ru4l extracting this from our app would be a pain. Would you be able to jump on a hangout?

[jwaldrip]

@nosuchip did you ever find a solution here? Or @n1ru4l, I can show you the issue. But we need to jump on a hangout.

[jwaldrip]

@n1ru4l pinging again... Can someone help out here. 😢

[IssueHuntBot]

@jwaldrip has funded $100.00 to this issue. See it on IssueHunt

[SimonErm]

@jwaldrip I am still not able to reproduce this error. I tried it by using RNCamera as root component and within a modal. On which devices(brand) do this error occure?

[Zaporozhec7]

I have same issue. App using react-native-navigation library for routing. React-native version 0.57.7.
And I have different behaviour on 2 physical devices:

• On device with Android 8.0.0 I have Promise that rejected immediatelly, with error same as posted by @nosuchip
• On device with Android 7.1.2, I have Promise that never resolved or rejected.

I can write about my devices brands:
Device with Android 8.0.0 - Huawei P smart (FIG-LX1)
With Android 7.1.2 - Xiaomi Redmi 4A

[jwaldrip]

@SimonErm this occurs within the simulator and on every live device we have tried. Any chance you can do a hangout and I can show you the logs of what is happening.

[sibelius]

@jwaldrip do you have a repo on github where we can reproduce this?

[jwaldrip]

It's on Github, but private. It would take time to extract everything into its own repo. Getting on a screenshare would be the easiest thing...

[amitkatiyar0692]

I am facing the same issue. Camera is preview is black. I am using react-native-router-flux

[sibelius]

this error only happen on modal?

[zeekay18]

@jwaldrip I'm facing the same issue too. Can you jump on a hangout so I can show you my logs.

[ghasemikasra39]

same issue. Any Solution ?

[charlesinwald]

I had this issue and managed to work around it by switching to the Function as Children implementation. I am using camera version 2.9.0, and navigation version 3.8.1. One thing I noticed when attempting to debug the non FaC implementation was that my ref attribute of RNCamera seemed to be undefined.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions. You may also mark this issue as a "discussion" and i will leave this open.

[nicolas-rohricht]

Someone has found any solution?

PS: I'm using a simulator.

Update: in my case, styles was not being passed to the component. Now, it's working.

[n1ru4l]

Going to close this, feel free to open a new issue with consistent reproduction in case you experience this with the newest version.

[renatobenks]

are you guys still facing this? @nosuchip @jwaldrip @Zaporozhec7