I've built a running app that should display the user's running data after they have completed a run. When the runner confirms they have stopped running, they go from the "Finishing Screen" back to the "Home Screen."
Sometimes, the modal containing the user's running info doesn't pop up, while other times the modal pops up after the user has completed a run, goes to the home screen, then goes to their profile screen, then back to the home screen.
It should only pop up if they are coming from the finishing screen. Here is an example of the current behavior:
Finishing Screen => Home Screen (Modal should pop, but sometimes doesn't)
Finishing Screen => Home Screen => Profile Screen (Accessed via Drawer Navigator) => Home Screen (Modal pops up, but shouldn't)
Below is my code:
//HomeScreen
import React, { useState, useEffect } from 'react';
import {Alert, BackHandler, Button, Dimensions, Image, SafeAreaView, StyleSheet, StatusBar, ScrollView, Text, TextInput, TouchableOpacity, View, } from 'react-native'
import { useFocusEffect } from '@react-navigation/native'
const HomeScreen = ({navigation, route}) => {
client_instance.assign_navigator(navigation) //server keeps track of user's screen location
const [isModalVisible, setModalVisible] = useState(false);
const toggleModal = () => {
setModalVisible(!isModalVisible);
}
useFocusEffect(
React.useCallback(()=>{
let isActive = true
async function getLocationAsync(){ //function that lives in the useFocusEffect
let {status} = await Location.requestForegroundPermissionsAsync()
if(status !== 'granted'){
setErrorMsg('Permission to access location was denied')
return;
}
let location = await Location.getCurrentPositionAsync({});
setLocation(location)
}
if(route.params?.didComeFromFinishingScreen)
{console.log('didComeFromFinishingScreen is attempting to open modal')
setModalVisible(true)}
return()=>{
console.log('cleanup function is closing modal)
setModalVisible(false)
}
getLocationAsync()
},
[],
),
)
return(
<View>
<Modal isVisible = {isModalVisible}>
<View style = {styles.modal}>
<Text style = { styles.modalText}> {i18n.t('summary')} </Text>
<Text style = { styles.modalText2}> {i18n.t('distance')}: {distance} </Text>
<View style = {styles.modal_view}>
<View style = {styles.button4 }>
<TouchableOpacity
onPress = {toggleModal}
>
<Text style = {[styles.modalText,{ fontSize: height*0.03, color: '#009387', textAlign: 'center', width: width}]}>{i18n.t('continue')}</Text>
</TouchableOpacity>
</View>
</View>
<TouchableOpacity
onPress = {toggleModal}
>
</TouchableOpacity>
</View>
</Modal>
</View>
)
}
//FinishingScreen
const stopRunning = async () => { //This function allows the user to stop running
Alert.alert(
i18n.t('stop2'),
i18n.t('stop3'),
[
{
text: (i18n.t('yes')),
onPress: ( checkConfirm )
},
{
text: i18n.t('no'),
onPress: (null)
}]
)
}
const checkConfirm = async () => { //sends response to the server to stop collecting running info
let response = await client_instance.stop_running()
navigation.navigate('Home', {
didComeFromFinishingScreen: true
})
}
...
<TouchableOpacity
style={styles.button}
onPress={stopRunning}
>
<Text>{i18n.t('stopRun'}</Text>
</TouchableOpacity>