Cannot read property 'Aspect' of undefined

[mkhanal]

Steps to reproduce

1. First import of the library throws error

Expected behaviour

Should instantiate camera

Actual behaviour

Cannot read property 'Aspect' of undefined

Environment

• Node.js version: v4.4.0
• React Native version: react-native-cli: 0.2.0, react-native: 0.24.1
• React Native platform + platform version: iPhone6 - iOS 9.2

react-native-camera

Version: "master"

[mkhanal]

Initial debugging shows that CameraModule is undefined after line 12 in Camera.js

const CameraManager = NativeModules.CameraManager || NativeModules.CameraModule;

-> console.log(CameraManager) here shows that CameraManager is undefined

[Dave2011]

Hi, I get the same error, why is this issue closed? Is it already fixed?

[VansonLeung]

If you are using:
var Camera = require('react-native-camera')

Try
import Camera from 'react-native-camera'

[mkhanal]

I used import and i got this error

[athomasoriginal]

@mkhanal I ran into this issue as well. For me it was because it was not properly installed in my xcodeproject. I ran through the install instructions again and it worked :)

[letthewookieewin]

Thank you @tkjone, followed the manual installation instructions (no rnpm) and it worked!

[mkhanal]

@tkjone...unfortunately i am not using xcodeproject. I just use the command line and that's where i hit the issue. I've run through the instructions multiple times and even cleaned and reinstalled the whole environment. :(

[Dave2011]

@VansonLeung switching from var ... = require to the import worked for me, thank you!

[mkhanal]

BTW...for me its failing for android development

[martinezguillaume]

After linked the library into your android project, you need to reinstall the project on your phone/emulator with react-native run-android for example

[zyadsherif]

@martinezguillaume that solves the issue, thanks

[jqn]

I was experiencing the same error only in android - the best way to deal with this is to make sure the project is not running when doing the initial install - for ex: stop the android emulator and the android packager running in the terminal.

I was also getting this error and it's related to the installation:
MainActivity.java:22: error: method does not override or implement a method from a supertype @OverRide

[jqn]

In addition to the above the documentation is also inaccurate for react native 0.29.0 - don't make changes to MainActivity.java. Instead make changes to MainApplication.java:
import com.lwansbrough.RCTCamera.*;
and

new RCTCameraPackage()

[commit-master]

Need help, I got the same issue on iOS.

[leonacky]

Android is worked but get error on IOS, I have tried auto linked and manual linked the package
still get error

[jjhesk]

import React, {Component} from 'react';
import {
  AppRegistry,
  View,
  StyleSheet,
  Dimensions,
  TouchableHighlight,
  Image,
  Text,
} from 'react-native';
import Camera from 'react-native-camera';
...
class CameraRoute extends Component {
  constructor(props) {
    super(props);

    this.state = {
      path: null,
    };
  }

  takePicture() {
    this.camera.capture()
      .then((data) => {
        console.log(data);
        this.setState({path: data.path})
      })
      .catch(err => console.error(err));
  }

  renderCamera() {
    return (

      <Camera
        ref={(cam) => {
          this.camera = cam;
        }}
        style={styles.preview}
        aspect={Camera.constants.Aspect.fill}
        captureTarget={Camera.constants.CaptureTarget.disk}
      >
        <TouchableHighlight
          style={styles.capture}
          onPress={this.takePicture.bind(this)}
          underlayColor="rgba(255, 255, 255, 0.5)"
        >
          <View />
        </TouchableHighlight>
      </Camera>
    );
  }

  renderImage() {
    return (
      <View>
        <Image
          source={{uri: this.state.path}}
          style={styles.preview}
        />
        <Text
          style={styles.cancel}
          onPress={() => this.setState({path: null})}
        >Cancel
        </Text>
      </View>
    );
  }

  render() {
    return (
      <View style={styles.container}>
        {this.state.path ? this.renderImage() : this.renderCamera()}
      </View>
    );
  }
};

export default CameraRoute;

CameraManager.Aspect is undefined. This error occurred on Android.

[ktsein]

I had the same problem with iOS version. JPN is right.
Make sure the project is not running during the initial install to avoid this issue.
Mine is working now.

[hybrisCole]

I'm having the same issue when trying to jest snapshot a component using it:

test('BarcodeScanner', () => {
  const tree = ReactTestRenderer.create(
    <BarcodeScanner
        onPress={ () => {} }
    />
  ).toJSON();
  expect(tree).toMatchSnapshot();
});

result:

 FAIL  js/components/common/__tests__/Components.test.js
  ● Test suite failed to run

    TypeError: Cannot read property 'Aspect' of undefined

      at Object.<anonymous> (node_modules/react-native-camera/index.js:250:78)
      at Object.<anonymous> (js/components/common/__tests__/Components.test.js:3:1)

[thomasobrien99]

@hybrisCole did you have any luck with solving that issue?

[hybrisCole]

@thomasobrien99 sorry man, I made a post w my use case here so the guys are aware but haven't tried anything else to solve it

[jayhuang75]

@hybrisCole Same here! any luck?

[youhan26]

IOS:
auto link : Aspect is undefined error
manual link : simulator stop when enter the page using Camera
Anybody can save me ? troubled me very.

[hugohow]

+1

[youhan26]

Update:
IOS manual link now can work well, before I write the usage, after check the Xcode output and change the wrong usage, it worked!

[nikolal]

I have the same issue, tried auto and manual install.

[mantap123]

The camera run smoothly on iOS and Android emulator.
But there is error when I run jest test:
npm test

Result:

  ● Test suite failed to run

    TypeError: Cannot read property 'Aspect' of undefined
      
      at Object.<anonymous> (node_modules/react-native-camera/index.js:250:78)
      at Object.<anonymous> (src/views/VideoRecorder/VideoRecorder.js:7:24)
      at Object.<anonymous> (src/views/VideoRecorder/index.js:1:166)

[sibelius]

u can create a mock for react-native-camera

something like this:

__mocks__
   react-native-camera.js

// react-native-camera.js

const Camera = {}
export default Camera;

[Ajackster]

I got this error on iOS and rebuilding on device fixed the issue.

[DeveloperAlly]

same issue. I use atom as my environment. I have cleaned and reinstalled node_modules and re-run the project. Checked I have linked elements and put the ios10 warnings in info.plist. I use the import keyword.
Still get this error. :(

EDIT : sorry this was my own fault - using react-native <0.4 and had installed react-native-camera0.5 {leaving in case this helps anyone}

[aizhaodangning]

i got the same error on iOS, need help !

undefined is not an object(evaluating 'CameraManager.Aspect')

[stoefln]

Me too :/

[MaxwellGover]

Like @Ajackster mentioned, for iOS, removing the app from my device and then rebuilding via XCode worked for me.

[ashokseervidev]

can somebody help me to resolve this issue. i am getting this error when i run npm test.

[SirNeuman]

@AshokICreate did you see sibelius's comment for using mocks?

[jamietj]

I get this error when using react-native-camera with the react-native-navigation package. I have tried building on an Android device (as well as emulator), reinstalling package, deleting node_modules and npm install, update. I have had this camera package working many times but each time I try to get it working with some navigator something breaks. With the original navigator package, it works but each time I go back to the camera the app crashes.
Has anyone got this working with a navigator, if so which one?

[fgrs]

same issue and I'm also using react-native-navigator too :/

+1

[mateorecoba]

Same issue on ios.
Any updates?

[tuckerjt07]

I am getting the issue on android. Have performed the manual installation steps as well.

[kjkta]

• Stop the simulator and build processes
• Run react-native link react-native-camera
• Run react-native run-ios | react-native run-android

Seems like a required step. Should be in Getting Started docs?

[aaronbuchanan]

yes, @kjkta pretty much every native module will need this step, fyi!

[stevenleeg]

Seeing this issue as well (also using react-navigation). Any updates here?

[jseverinson]

I had this issue in the simulator. Removing the app from the simulator and running react-native run-ios again to rebuild fixed it.

[victorbadila]

• 1
  I did as @jseverinson said and it did not work for me on the iOS simulator. Oddly enough it works well on actual Android and iOS devices so far.

[hakanozen]

+1
any updates?

[lightning-zgc]

react-native link
May fix that.

[sibelius]

react-native link react-native-camera

rebuilds

[hampelm]

I was seeing a similar problem when running jest tests, and mocking Camera by adding this at the top of tests per the jest docs solved it:

jest.mock('react-native-camera', () => 'Camera')

[stallen2]

I also have this issue. Then I find that I missed two steps in the documentation.

First remember to add permissions in plist file.

<key>NSPhotoLibraryAddUsageDescription</key>
<string>Your message to user when the camera is accessed for the first time</string>
<key>NSCameraUsageDescription</key>
<string>Your message to user when the camera is accessed for the first time</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>Your message to user when the photo library is accessed for the first time</string>
<key>NSMicrophoneUsageDescription</key>

Then remember to add dependency in your podfile.

pod 'react-native-camera', :path => '../node_modules/react-native-camera'
and run pod install.

For me it works after these two steps. If it still not work, check if you link the library properly.

Hope it helps.

[hwmiao]

react-native link react-native-camera,then,react-native run-ios
done!

[matheusbtrevisan]

i already did.

[godoakbrutal]

this work for me in iOS

1. remove folder build in folder ios
2. react-native run-ios

done.

[casperstorm]

If someone is still facing this issue, then please remember to follow the steps to ensure Face Detection is removed from the project.

[devtas]

In iOS:

1. Open Xcode
2. Import RNCamera.xcodeproj from node_modules/react-native-camera/ios/ to Libraries folder inside XCode
3. In Build Phases of your project, select Link Binary With Libraries and add libRNCamera.a.

Works fine for me!

[studiobrain]

@devtas Im actually attempting this now, and I cannot get a build through.
My RNCamera.xcodeproj is located in:
../node_modules/react-native-camera/ios/RNCamera.xcodeproj

yet the libRNCamera.a file is located in:
User/Library/Developer/Xcode/DerivedData/AppName-bzwvfybuowffzfdkbcxoqnjwfzrm/Build/Products/Debug-iphonesimulator/libRNCamera.a

...If I search for it in the Link Binary With Libraries section it isnt found, yet if I drag it in I get build errors.

Did you do anything differently?