Move TimerProgress from App.tsx -> AppDrawer.tsx

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

App.tsx

@@ -13,7 +13,6 @@ import {
 import MaterialIcon from "react-native-vector-icons/MaterialCommunityIcons";
 import AppSnack from "./AppSnack";
 import AppStack from "./AppStack";
-import TimerProgress from "./TimerProgress";
 import { AppDataSource } from "./data-source";
 import { settingsRepo } from "./db";
 import { ThemeContext } from "./use-theme";
@@ -37,6 +36,7 @@ export const CombinedDarkTheme = {
 };
 
 const App = () => {
+  console.log("Re rendered app");
   const systemTheme = useColorScheme();
 
   const [appSettings, setAppSettings] = useState({
@@ -108,7 +108,6 @@ const App = () => {
       </NavigationContainer>
 
       <AppSnack textColor={paperTheme.colors.background} />
-      <TimerProgress />
     </PaperProvider>
   );
 };

AppDrawer.tsx

@@ -11,6 +11,7 @@ import TimerPage from "./TimerPage";
 import WeightList from "./WeightList";
 import { DrawerParams } from "./drawer-param-list";
 import useDark from "./use-dark";
+import TimerProgress from "./TimerProgress";
 
 const Drawer = createDrawerNavigator<DrawerParams>();
 
@@ -24,60 +25,63 @@ export default function AppDrawer({
   const dark = useDark();
 
   return (
-    <Drawer.Navigator
+    <>
-      screenOptions={{
+      <Drawer.Navigator
-        headerTintColor: dark ? "white" : "black",
+        screenOptions={{
-        swipeEdgeWidth: 1000,
+          headerTintColor: dark ? "white" : "black",
-        headerShown: false,
+          swipeEdgeWidth: 1000,
-      }}
+          headerShown: false,
-      initialRouteName={
-        (route.params.startup as keyof DrawerParams) || "History"
-      }
-    >
-      <Drawer.Screen
-        name="History"
-        component={SetList}
-        options={{ drawerIcon: () => <IconButton icon="history" /> }}
-      />
-      <Drawer.Screen
-        name="Exercises"
-        component={ExerciseList}
-        options={{ drawerIcon: () => <IconButton icon="dumbbell" /> }}
-      />
-      <Drawer.Screen
-        name="Plans"
-        component={PlanList}
-        options={{ drawerIcon: () => <IconButton icon="calendar-outline" /> }}
-      />
-      <Drawer.Screen
-        name="Graphs"
-        component={GraphsList}
-        options={{
-          drawerIcon: () => <IconButton icon="chart-bell-curve-cumulative" />,
         }}
-      />
+        initialRouteName={
-      <Drawer.Screen
+          (route.params.startup as keyof DrawerParams) || "History"
-        name="Timer"
+        }
-        component={TimerPage}
+      >
-        options={{ drawerIcon: () => <IconButton icon="timer-outline" /> }}
+        <Drawer.Screen
-      />
+          name="History"
-      <Drawer.Screen
+          component={SetList}
-        name="Weight"
+          options={{ drawerIcon: () => <IconButton icon="history" /> }}
-        component={WeightList}
+        />
-        options={{ drawerIcon: () => <IconButton icon="scale-bathroom" /> }}
+        <Drawer.Screen
-      />
+          name="Exercises"
-      <Drawer.Screen
+          component={ExerciseList}
-        name="Insights"
+          options={{ drawerIcon: () => <IconButton icon="dumbbell" /> }}
-        component={InsightsPage}
+        />
-        options={{
+        <Drawer.Screen
-          drawerIcon: () => <IconButton icon="lightbulb-on-outline" />,
+          name="Plans"
-        }}
+          component={PlanList}
-      />
+          options={{ drawerIcon: () => <IconButton icon="calendar-outline" /> }}
-      <Drawer.Screen
+        />
-        name="Settings"
+        <Drawer.Screen
-        component={SettingsPage}
+          name="Graphs"
-        options={{ drawerIcon: () => <IconButton icon="cog-outline" /> }}
+          component={GraphsList}
-      />
+          options={{
-    </Drawer.Navigator>
+            drawerIcon: () => <IconButton icon="chart-bell-curve-cumulative" />,
+          }}
+        />
+        <Drawer.Screen
+          name="Timer"
+          component={TimerPage}
+          options={{ drawerIcon: () => <IconButton icon="timer-outline" /> }}
+        />
+        <Drawer.Screen
+          name="Weight"
+          component={WeightList}
+          options={{ drawerIcon: () => <IconButton icon="scale-bathroom" /> }}
+        />
+        <Drawer.Screen
+          name="Insights"
+          component={InsightsPage}
+          options={{
+            drawerIcon: () => <IconButton icon="lightbulb-on-outline" />,
+          }}
+        />
+        <Drawer.Screen
+          name="Settings"
+          component={SettingsPage}
+          options={{ drawerIcon: () => <IconButton icon="cog-outline" /> }}
+        />
+      </Drawer.Navigator>
+      <TimerProgress />
+    </>
   );
 }

TimerProgress.tsx

@@ -1,20 +1,24 @@
-import { useEffect, useState } from "react";
+import { useFocusEffect } from "@react-navigation/native";
-import { emitter } from "./emitter";
+import { useCallback, useState } from "react";
-import { TickEvent } from "./TimerPage";
 import { ProgressBar } from "react-native-paper";
+import { TickEvent } from "./TimerPage";
+import { emitter } from "./emitter";
 
 export default function TimerProgress() {
   const [progress, setProgress] = useState(0);
 
-  useEffect(() => {
+  useFocusEffect(
-    const description = emitter.addListener(
+    useCallback(() => {
-      "tick",
+      const description = emitter.addListener(
-      ({ minutes, seconds }: TickEvent) => {
+        "tick",
-        setProgress((Number(minutes) * 60 + Number(seconds)) / 210);
+        ({ minutes, seconds }: TickEvent) => {
-      }
+          setProgress((Number(minutes) * 60 + Number(seconds)) / 210);
-    );
+          console.log({ minutes, seconds });
-    return description.remove;
+        }
-  }, []);
+      );
+      return description.remove;
+    }, [])
+  );
 
   if (progress === 0) return null;