How to stop timer while navigating on next Screen?

[osamaejaz89]

Hi,

I am using UserInactivity component on the screen and timer does not stop while navigating on other screens, it works on other screens too. Can you guide me how to stop UserInactivity component on other screens?

[ggonzalez-lt]

You have to catch when the screen main component are unfocused. Not unmounted, because it never be really unmounted in React Native actually. Then you should have to return something without the UserInactivity tag, some component different to the original component involve in the UserInactivity tag. Or the same component but without the UserInactivity tag. This is going to discard the timer in the new View of the React Navigation. Don't forget to catch the focus state of the View again and return the original Component involve in the UserInactivity tag to start the timer again.

import React,{useState, useCallback} from 'react';
import {useFocusEffect} from '@react-navigation/native';
import UserInactivity from 'react-native-user-inactivity';
...

const MyComponent = (props)=>{
useFocusEffect(
useCallback(() => {
setIsMounted(true);
console.log('SCREEN IS FOCUS');
return () => {
setIsMounted(false);
console.log('SCREEN IS UNFOCUSED');
};
}, [])
);
...
const [active, setActive] = useState(true);
const [timer, setTimer] = useState(10000);
const [isMounted, setIsMounted] = useState(true);

if(isMounted){
return(
<UserInactivity
isActive={active}
timeForInactivity={timer}
onAction={isActive => setActive(isActive)}
style={{ flex: 1 }}
>


);
}else{
return();
}
export default MyComponent;