hi please i need to use camera and it loads correctly but when open throws it warning :
Can’t call setState (or forceUpdate) on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.
my code is :
import React, {Component} from 'react';
import { Container, Footer, Content, Icon, Body, Header, Grid, Row, Right, Left, Text } from 'native-base';
import {Image, TouchableOpacity, TouchableWithoutFeedback, AsyncStorage, View} from 'react-native';
import Styles from '../../assets/styles/style';
import {Camera, Permissions } from 'expo';
class CameraApp extends Component{
constructor(props){
super(props);
this.state = {
hasCameraPermission: null,
type: Camera.Constants.Type.back
};
this.camera;
_isMounted = false;
}
static navigationOptions = {
header: null,
};
componentDidMount(){
this._isMounted = true;
this.permissions();
}
permissions = async () =>{
if(this._isMounted ){
try {
await Permissions.askAsync(Permissions.CAMERA);
const check = await Permissions.getAsync(Permissions.CAMERA);
this.setState({hasCameraPermission: check.status});
} catch (error) {
console.error(error);
}
}
}
// from back to from camera and reverse
switchCamera = async () => {
if(this._isMounted){
this.setState({
type: (this.state.type == Camera.Constants.Type.back) ? Camera.Constants.Type.front : Camera.Constants.Type.back,
});
//logout, pratice
await AsyncStorage.clear();
}
}
snap = async () => {
if(this._isMounted){
if (this.camera) {
let photo = await this.camera.takePictureAsync();
this.props.navigation.navigate('previewImage',{image: photo});
}
}
};
componentWillUnmount() {
this._isMounted = false
}
render(){
const {hasCameraPermission} = this.state;
let display;
if(hasCameraPermission == 'granted'){
display =
(<Camera ratio='16:9' ref={ref => {this.camera = ref}} style={{flex: 1}} type={this.state.type}>
<Content style={Styles.transparent}>
<Grid style={Styles.transparent}>
<Row style={Styles.transparent}>
<Body>
</Body>
</Row>
</Grid>
</Content>
<Footer >
<Left />
<Body style={[Styles.button,Styles.center]} >
<TouchableOpacity onPress={this.snap} >
<Icon name="camera" />
</TouchableOpacity>
</Body>
<Right style={[Styles.center,Styles.buttonSmall]} >
<TouchableWithoutFeedback >
<Text>Reverse</Text>
</TouchableWithoutFeedback>
</Right>
</Footer>
</Camera>);
}else if (hasCameraPermission == 'denied'){
display = (<View style={Styles.center}><Text>No access to camera</Text></View>)
}else{
display = <View />
}
return (
<Container >
<Header />
{this._isMounted ? display : <View /> }
</Container>
);
}
}
export default CameraApp;