How to destroy component or stop its execution when route changes using React-Native?

Question

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;

Answer 1

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