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;

CodePudding user response：

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.

CodePudding user response：

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

CodePudding user response：

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