Brandon Presley
6950cd04f4
The App.tsx had a bunch of separate useState calls which would cause unneccesary re-renders of the entire app. This became apparent after adding the global progress bar, since it caused even more re-renders to the point of being unusable.
31 lines
691 B
TypeScript
31 lines
691 B
TypeScript
import { useEffect, useState } from "react";
|
|
import { emitter } from "./emitter";
|
|
import { TickEvent } from "./TimerPage";
|
|
import { ProgressBar } from "react-native-paper";
|
|
|
|
export default function TimerProgress() {
|
|
const [progress, setProgress] = useState(0);
|
|
|
|
useEffect(() => {
|
|
const description = emitter.addListener(
|
|
"tick",
|
|
({ minutes, seconds }: TickEvent) => {
|
|
setProgress((Number(minutes) * 60 + Number(seconds)) / 210);
|
|
}
|
|
);
|
|
return description.remove;
|
|
}, []);
|
|
|
|
if (progress === 0) return null;
|
|
|
|
return (
|
|
<ProgressBar
|
|
style={{
|
|
position: "absolute",
|
|
bottom: 0,
|
|
}}
|
|
progress={progress}
|
|
/>
|
|
);
|
|
}
|