In my app, I have a modal that is supposed to pop up if the app detects the user came from the "FinishingScreen" other than that, the modal should not pop up.
I have a " Drawer Tab Navigator " nested inside of my " Main Tab Navigator "
When I navigate from the FinishingScreen to my HomeScreen, the modal pops up because didComeFromFinishingScreen == true
When I navigate to any of the screens contained in the Drawer, then back to the HomeScreen, the modal pops up again because didComeFromFinishingScreen is still returning true.
I believe this has to do with how I am handling the route.params.
Below is the code that I use to handle the route.params:
Code inside of FinishingScreen making modal initially toggle
const checkConfirm = async () => {
return await client_instance.stop_running().then(
()=>navigation.navigate('Home', {
didComeFromFinishingScreen: true,
})
)
}
...
<TouchableOpacity
onPress={checkConfirm}
>
<Text>Stop Running</Text>
</TouchableOpacity>
Checking if didComeFromFinishingScreen == true inside the HomeScreen
if(route.params?.didComeFromFinishingScreen){
if(isFocused){
setModalVisible(true)
}
}
return()=>{
console.log('cleanup function is closing modal')
if(isFocused){
setModalVisible(false)
}
}
Going from the HomeScreen to one of the screens inside the Drawer
<DrawerItem
icon={({color, size }) => (
<Icon
name="account-outline"
color={color}
size={height*0.032}
/>
)}
label= {i18n.t('prof')}
onPress={()=>{navigation.navigate('ProfileStackScreen',
{didComeFromFinishingScreen: false}
)}}
/>
Navigating back to the HomeScreen from any of the screens in the Drawer
<DrawerItem
icon={({color, size }) => (
<Icon
name="home-outline"
color={color}
size={height*0.032}
/>
)}
label= {i18n.t('home')}
onPress={()=>{navigation.navigate('HomeDrawer', {
didComeFromFinishingScreen: false})
}}
/>