How to create countdown component with React-Native and Moment.js? - reactjs

Question

I am creating simple countdown component with React-Native, for date formatting I am using moment.js, I am getting data from API call in seconds format, then providing to child component, I want to transform this kind of data 121 into 2:01, How to use moment to achieve this result and do not kill performance?
import { MaterialCommunityIcons } from "#expo/vector-icons";
import moment from "moment";
import React, { useEffect, useState} from "react";
import { View, Text} from "react-native";
const Timer: React.FC<{ expirationDate: number,focus:boolean, loading:boolean}> = ({ expirationDate, focus, loading}) => {
const [inactive, setIncative] = useState(false);
const [timerCount, setTimer] = useState<number>(0) //can be any number provided from props
useEffect(() => {
setTimer((prev:number)=> (expirationDate))
let interval = setInterval(() => {
setTimer(lastTimerCount => {
lastTimerCount <= 1 && clearInterval(interval)
return lastTimerCount - 1
})
}, 1000)
return () => clearInterval(interval)
}, [loading]);
return (
<View
style={{
backgroundColor: expirationDate < 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={expirationDate < 300 || inactive ? "#f54c4c" : "#004978"} />
</View>
//line sholud be changed
<Text>{moment.duration(timerCount).format("h:mm")}</Text>
</View>
);
};
export default Timer;

Answer 1

I found solotion: using moment utc method and transform state value into miliseconds
import { MaterialCommunityIcons } from "#expo/vector-icons";
import moment from "moment";
import React, { useEffect, useState} from "react";
import { View, Text} from "react-native";
const Timer: React.FC<{ expirationDate: number,focus:boolean, loading:boolean}> = ({ expirationDate, focus, loading}) => {
const [inactive, setIncative] = useState(false);
const [timerCount, setTimer] = useState<number>(0)
useEffect(() => {
setTimer((prev:number)=> (expirationDate))
let interval = setInterval(() => {
setTimer(lastTimerCount => {
lastTimerCount <= 1 && clearInterval(interval)
return lastTimerCount - 1
})
}, 1000)
return () => clearInterval(interval)
}, [loading]);
return (
<View
style={{
backgroundColor: expirationDate < 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={expirationDate < 300 || inactive ? "#f54c4c" : "#004978"} />
</View>
<Text>{moment.utc(timerCount * 1000).format("mm:ss")}</Text>
</View>
);
};
export default Timer;