I am creating simple countdown component with React-Native and using this package react-native-countdown-component, I want to destroy this Timer component or stop its execution when the focused screen changes, for Bottom navigation I am using React-Native Tab navigation, what is best solution to achieve this result?
import { MaterialCommunityIcons } from "@expo/vector-icons";
import React, { useEffect, useState } from "react";
import { View } from "react-native";
import CountDown from "react-native-countdown-component";
const Timer: React.FC<{ expirationDate: number }> = ({ expirationDate }) => {
const [timer, setCurrentTime] = useState<number>(expirationDate);
const [inactive, setIncative] = useState(false);
return (
<View
style={{
backgroundColor: timer < 300 || inactive ? "#edbcbc" : "#cee5f4",
width: 70,
borderRadius: 7,
paddingVertical: 6,
flexDirection: "row",
alignItems: "center",
justifyContent: "center",
position: "relative",
}}
>
<View style={{ position: "relative", left: 4 }}>
<MaterialCommunityIcons name="timer-outline" size={13} color={timer < 300 || inactive ? "#f54c4c" : "#004978"} />
</View>
<CountDown
until={timer}
timeToShow={["M", "S"]}
timeLabels={false}
digitStyle={{ backgroundColor: "#f5f5f500" }}
separatorStyle={{ color: "#004978", fontSize: 10 }}
digitTxtStyle={{ color: timer < 300 || inactive ? "#f54c4c" : "#004978" }}
onFinish={() => setIncative(true)}
size={9}
running={timer ? true : false}
showSeparator
/>
</View>
);
};
export default Timer;the useEffect function allows you to return a function that gets called when a component unmounts. you could use that or call something when the tab changes.
The CountDown component manages the timer itself and the library author manage to clear the timer when the component unmount https://github.com/talalmajali/react-native-countdown-component/blob/master/index.js#L58
please read this link:
https://github.com/talalmajali/react-native-countdown-component/blob/master/index.js#L58
if you have any question you can ask it