2023-11-14 00:55:59 +00:00
|
|
|
import { useFocusEffect } from "@react-navigation/native";
|
|
|
|
import { useCallback, useState } from "react";
|
2023-11-13 04:33:32 +00:00
|
|
|
import { ProgressBar } from "react-native-paper";
|
2023-11-14 00:55:59 +00:00
|
|
|
import { emitter } from "./emitter";
|
2023-11-14 22:21:49 +00:00
|
|
|
import { TickEvent } from "./TimerPage";
|
2023-11-13 04:33:32 +00:00
|
|
|
|
|
|
|
export default function TimerProgress() {
|
|
|
|
const [progress, setProgress] = useState(0);
|
|
|
|
|
2023-11-14 00:55:59 +00:00
|
|
|
useFocusEffect(
|
|
|
|
useCallback(() => {
|
|
|
|
const description = emitter.addListener(
|
|
|
|
"tick",
|
|
|
|
({ minutes, seconds }: TickEvent) => {
|
|
|
|
setProgress((Number(minutes) * 60 + Number(seconds)) / 210);
|
|
|
|
console.log({ minutes, seconds });
|
|
|
|
}
|
|
|
|
);
|
|
|
|
return description.remove;
|
|
|
|
}, [])
|
|
|
|
);
|
2023-11-13 04:33:32 +00:00
|
|
|
|
|
|
|
if (progress === 0) return null;
|
|
|
|
|
|
|
|
return (
|
|
|
|
<ProgressBar
|
|
|
|
style={{
|
|
|
|
position: "absolute",
|
|
|
|
bottom: 0,
|
|
|
|
}}
|
|
|
|
progress={progress}
|
|
|
|
/>
|
|
|
|
);
|
|
|
|
}
|