2

I have an application where inside a useEffect I am triggering a modal to show based on result of Permissions.getAsync(Permissions.LOCATION); When the entry screen after login shows the first time it shows the following error:

Warning: Can't perform a React state update 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 %s.%s, a useEffect cleanup function,

However, all subsequent opens of the app are fine and don't error out. My code for the MainScreen is as follows:

import React, { useEffect, useCallback, useState } from 'react';
import { View, StyleSheet, Platform, Alert } from 'react-native';
import { useSelector, useDispatch } from 'react-redux';
import * as Location from 'expo-location';
import * as Permissions from 'expo-permissions';

import LocationTrackingModal from '../components/Modals/LocationTrackingModal';

const MainScreen = props => {

    const [gameModalVisibile, setGameModalVisible] = useState(false);
    const [locationTrackingModal, setLocationModalTrack] = useState(false); // will show for first time 
    const [locationPermission, setLocationPermission] = useState('undetermined');

    const { user } = useSelector(state => state.auth);
    const dispatch = useDispatch();


    const toggleLocationModal = useCallback(() => {
        setLocationModalTrack(!locationTrackingModal);
    }, [locationTrackingModal]);

    useEffect(() => {
        console.log('useEffect 1!')
        const locationPermissionOnboarding = async () => {
            let result = await Permissions.getAsync(Permissions.LOCATION);
            //setLocationPermission(result.status);
            if(result.status === 'undetermined' ) { //need to ask for permission if/o/if undetermined
                setLocationModalTrack(true);
            }
        }

        locationPermissionOnboarding();
    }, []);

    useEffect(() => {
        console.log('useEffect 2!')
        const getCurrentPosition = async () => {
            const hasPermission = await Permissions.getAsync(Permissions.LOCATION);  //ask one more time for permission
            if(hasPermission.status !== 'granted') return; //TODO: if current location is not enabled then make sure that is known on map screen
            try {
                const location = await Location.getCurrentPositionAsync({ 
                    timeout: 10000
                });

                //TODO: Something with location
                console.log(location)
            } catch(err) {
                Alert.alert(
                    'Could not fetch current location!',
                    'Check network connection...',
                    [{ text: 'Okay!'}]
                );
            }
        }
        getCurrentPosition();
    }, [locationPermission]);

    return (
        <View style={styles.container}>
            <LocationTrackingModal isVisible={locationTrackingModal} hideModal={toggleLocationModal} permissionTrigger={setLocationPermission} />

            ...
        </View>
    );
}

export const mapScreenOptions = (navData) => {
    return {
        headerTitle: () => (
            <HeaderToggle navData={navData} activeButtonLeft={true}/>
        ), 
        headerLeft: () => (
            <View>
                <HeaderButtons HeaderButtonComponent={DefaultHeaderButton}>
                    <Item title="menu" iconName="ios-menu" onPress={() => {
                        navData.navigation.toggleDrawer()
                    }} />
                </HeaderButtons>
            </View>
        ),
        headerTransparent: true,
        headerStyle: {
            backgroundColor: 'transparent', 
        },        
    }
}

export default MainScreen;

const styles = StyleSheet.create({
    container: {
        flex: 1
    },
    map: {
        flex: 1,
        width: '100%',
        height: '100%',
        zIndex: -1
    },
    customCallout: {
        height: 300,
        width: screenWidth - 25,
    },
});

Don't know if its an issue with the way I am using the useEffect hook. Any ideas / help?

SKeney
  • 1,965
  • 2
  • 8
  • 30
  • 2
    I came across this if it helps: https://stackoverflow.com/questions/56442582/react-hooks-cant-perform-a-react-state-update-on-an-unmounted-component – Shaun E. Tobias Mar 10 '20 at 03:04

0 Answers0