React Native Undefined is not an object (evaluating 'this.camera.capture') - ios

Question

export class CameraView extends Component {
render(){
return(
<View style={{
flex: 1,
width: '100%',
height: '100%',
}}>
<Camera
ref={(cam) => {
this.camera = cam;
}}
style={styles.preview}
aspect={Camera.constants.Aspect.fill}>
<CaptureControls></CaptureControls>
<Image></Image>
</Camera>
</View>
);
}
}
export class CaptureControls extends Component {
render(){
return(
<View style={{
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
bottom: 30,
}}>
<Image style={{
width: 30,
height: 30,
marginRight: 75,
}} source={require('img/opengallery.png')}></Image>
<TouchableHighlight onPress={this.takePicture.bind(this)}>
<Image style={{
width: 70,
height: 70,
}} source={require('img/takepicture.png')}> </Image>
</TouchableHighlight>
<Image style={{
width: 30,
height: 30,
marginLeft: 75,
}} source={require('img/switchcam.png')}></Image>
</View>
);
}
takePicture() {
this.camera.capture()
.then((data) => console.log(data))
.catch(err => console.error(err));
}
}
Here's my code. When pressing the takepicture button I get undefined is not an object. What is wrong with my code? takePicture() worked on a Text element though. I added a TouchableHighlight around the Image and added the onPress to TouchableHighlight, but now it crashes.
Kind regards,
Matthew

Answer 1

I guess you figured this out in the meantime. The 'camera' variable is assigned in the context of CameraView but the code tries to access it from within CaptureControls.