Brandon Presley
d0f6550f29
1. The lower this is in the stack the less re-renders we might cause 2. Now we can hook into useFocusEffect and prevent updates when out of focus
35 lines
839 B
TypeScript
35 lines
839 B
TypeScript
import { useFocusEffect } from "@react-navigation/native";
|
|
import { useCallback, useState } from "react";
|
|
import { ProgressBar } from "react-native-paper";
|
|
import { TickEvent } from "./TimerPage";
|
|
import { emitter } from "./emitter";
|
|
|
|
export default function TimerProgress() {
|
|
const [progress, setProgress] = useState(0);
|
|
|
|
useFocusEffect(
|
|
useCallback(() => {
|
|
const description = emitter.addListener(
|
|
"tick",
|
|
({ minutes, seconds }: TickEvent) => {
|
|
setProgress((Number(minutes) * 60 + Number(seconds)) / 210);
|
|
console.log({ minutes, seconds });
|
|
}
|
|
);
|
|
return description.remove;
|
|
}, [])
|
|
);
|
|
|
|
if (progress === 0) return null;
|
|
|
|
return (
|
|
<ProgressBar
|
|
style={{
|
|
position: "absolute",
|
|
bottom: 0,
|
|
}}
|
|
progress={progress}
|
|
/>
|
|
);
|
|
}
|