How to stop timer while navigating on next Screen? about react-native-user-inactivity HOT 1 OPEN

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;

from react-native-user-inactivity.