How do I fix this code so the modal only pops up once in React-Native/Expo?

Viewed 142

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>
0 Answers
Related