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?