Accessing camera in React Native - reactjs

Question

TL;DR: Doesn't work with IOS10 simulator. IOS9, however, seems fine.
I've been trying to implement L Wansbrough's react-native-camera module which everyone seems to recommend. After 10 hours of failing to get it to work, I really really need some help.
I gave up trying to get it into my existing project, so for now I'm just trying to do this from scratch in a brand new area. This is what I'm doing:
react-native init cameraProject
Okay, new project made. Let's just make sure the versions are right:
react-native -v
I get react-native-cli: 1.0.0 react-native: 0.36.0 returned. Just to check the requirements fully:
java -version
Returns: java version "1.8.0_112"
Java(TM) SE Runtime Environment (build 1.8.0_112-b16)
Java HotSpot(TM) 64-Bit Server VM (build 25.112-b16, mixed mode)
So the requirements look solid. Now:
react-native run-ios
Success - the app runs in the simulator, everything works as it should. Now I try and follow the documentation to install the react-native-camera. First off, there's a new requirements section regarding iOS10 which my simulator is running. You need to add the privacy key regarding the camera to the Info.plist file. This seems to have been omitted from the source code's example Info file and the documentation doesn't have the code required. I've dug around and added the following to cameraProject/ios/cameraProject/Info.plist:
<key>NSPhotoLibraryUsageDescription</key>
<string>Going to use some photos</string>
That's added in alphabetical order in the list, around line 25. Refreshing simulator and it's all good. Next:
npm install react-native-camera#https://github.com/lwansbrough/react-native-camera.git --save
followed by:
react-native link react-native-camera
Perfect; I get the messages I expect:
rnpm-install info Linking react-native-camera android dependency
rnpm-install info Android module react-native-camera has been successfully linked
rnpm-install info Linking react-native-camera ios dependency
rnpm-install info iOS module react-native-camera has been successfully linked
Everything still works as it should. Onto the 'Usage' section. I'm going to copy and paste the code out from GitHub into a module called BadInstagramCloneApp.js I'm then going to import that into index.ios.js with a basic import BadInstagramCloneApp from './BadInstagramCloneApp'; and we'll stick it in the main body with <BadInstagramCloneApp />.
Refresh the simulator:
Error
Alright, so quit the simulator, close Terminal and re-run react-native run-ios as I believe that should rebuild. It still doesn't work, throws:
Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method of 'cameraProject'.
I've loaded Xcode and looked at the manual instructions to link files. My library folder has the RCTCamera.xcodeproj file already. It's also already got libRCTCamera.a in the cameraProject->Build Phases->Link Binary with Libraries section. The Header Search Paths have the correct items in there and they are both marked as 'recursive' as per the instructions. Then CMD+R to run the project. New simulator loads, looks like it's going to work then falls over with the same red screen. Quit Xcode, run react-native run-ios again from Terminal (says build succeeded) and it's still giving the same error as above.
I've tried every permutation of this I can think of. I've tried copying the code from inside the example files, I've tried the older version of the module and I've followed a couple of tutorials online which are supposed to launch the react-native-camera as well. Not a single thing I've tried has ended in anything except a red screen or the application crashing out.
Suggestions? All I want to do is allow the user to take a photo and then return that photo as a Base64 encoded object.
index.ios.js
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
import BadInstagramCloneApp from './BadInstagramCloneApp';
export default class cameraProject extends Component {
render() {
return (
<View style={styles.container}>
<BadInstagramCloneApp />
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
}
});
AppRegistry.registerComponent('cameraProject', () => cameraProject);
BadInstagramCloneApp.js
'use strict';
import React, { Component } from 'react';
import {
AppRegistry,
Dimensions,
StyleSheet,
Text,
TouchableHighlight,
View
} from 'react-native';
import Camera from 'react-native-camera';
class BadInstagramCloneApp extends Component {
render() {
return (
<View style={styles.container}>
<Camera
ref={(cam) => {
this.camera = cam;
}}
style={styles.preview}
aspect={Camera.constants.Aspect.fill}>
<Text style={styles.capture} onPress={this.takePicture.bind(this)}>[CAPTURE]</Text>
</Camera>
</View>
);
}
takePicture() {
this.camera.capture()
.then((data) => console.log(data))
.catch(err => console.error(err));
}
}
const styles = StyleSheet.create({
container: {
flex: 1
},
preview: {
flex: 1,
justifyContent: 'flex-end',
alignItems: 'center',
height: Dimensions.get('window').height,
width: Dimensions.get('window').width
},
capture: {
flex: 0,
backgroundColor: '#fff',
borderRadius: 5,
color: '#000',
padding: 10,
margin: 40
}
});
// AppRegistry.registerComponent('BadInstagramCloneApp', () => BadInstagramCloneApp);
// AppRegistry.registerComponent('cameraProject', () => BadInstagramCloneApp);
module.exports = (BadInstagramCloneApp);
The console.log then throws this:
ExceptionsManager.js:62Cannot read property 'Aspect' of undefinedhandleException # ExceptionsManager.js:62handleError # InitializeJavaScriptAppEngine.js:120reportFatalError # error-guard.js:30guardedLoadModule # require.js:60_require # require.js:49(anonymous function) # require-0.js:1executeApplicationScript # debuggerWorker.js:20onmessage # debuggerWorker.js:38
RCTLog.js:38Running application cameraProject ({
initialProps = {
};
rootTag = 1;
})
ExceptionsManager.js:62Module AppRegistry is not a registered callable module (calling runApplication)handleException # ExceptionsManager.js:62handleError # InitializeJavaScriptAppEngine.js:120reportFatalError # error-guard.js:30guard # MessageQueue.js:48callFunctionReturnFlushedQueue # MessageQueue.js:107onmessage # debuggerWorker.js:44
ExceptionsManager.js:82Unhandled JS Exception: Cannot read property 'Aspect' of undefinedreactConsoleError # ExceptionsManager.js:82logIfNoNativeHook # RCTLog.js:38__callFunction # MessageQueue.js:236(anonymous function) # MessageQueue.js:108guard # MessageQueue.js:46callFunctionReturnFlushedQueue # MessageQueue.js:107onmessage # debuggerWorker.js:44
ExceptionsManager.js:82Unhandled JS Exception: Module AppRegistry is not a registered callable module (calling runApplication)
If I quit everything, reload, rebuild using react-native run-ios then the project builds correctly but crashes out after the splash screen is displayed. Console doesn't log any errors, but if I choose 'Pause on all caught exceptions' from the dev tools then it shows a stop here:
**_nodeUtil.js**
/** Used to access faster Node.js helpers. */
var nodeUtil = (function() {
try {
return freeProcess && freeProcess.binding('util');
} catch (e) {}
}());
If I try and run in from within Xcode rather than Terminal then it builds correctly, the simulator launches, but inside Xcode it opens cameraProject->Libraries->RCTCamera.xcodeproj->RCTCameraManager.m and highlights line 988:
[self.session commitConfiguration]; <Thread 1: EXC_BAD_ACCESS (code=1, address=0x50)
Any ideas on this?

Answer 1

I am having the same issue with a project I'm working on. According to this gitHub issue, the problem is a combination of new iOS 10 camera permissions and possibly also a problem with the simulator camera support itself. I've found that if I open the xcodeproj file directly in XCode, the simulator opens fine. I still haven't found a permanent fix but running build from XCode instead of react-native run-ios bypasses the issue for me. I'll follow up if I find a better option.

Answer 2

If I quit everything, reload, rebuild using react-native run-ios, then
the project builds correctly but crashes out after the splash screen
is displayed. Console doesn't log any errors, but if I choose 'Pause
on all caught exceptions' from the dev tools then it shows a stop
here:
_nodeUtil.js
Used to access faster Node.js helpers.
var nodeUtil = (function() {
try {
return freeProcess && freeProcess.binding('util');
} catch (e) {}
}());
I just can tell you that this is not relevant for your question, it always happen. Look here:
React Native - debugging exception