camera throw warning:Can't call setState


#1

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;

closed #2

This topic was automatically closed 15 days after the last reply. New replies are no longer allowed.