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,6 +25,7 @@ export default function AppDrawer({
   const dark = useDark();
 
   return (
+    <>
       <Drawer.Navigator
         screenOptions={{
           headerTintColor: dark ? "white" : "black",
@@ -79,5 +81,7 @@ export default function AppDrawer({
           options={{ drawerIcon: () => <IconButton icon="cog-outline" /> }}
         />
       </Drawer.Navigator>
+      <TimerProgress />
+    </>
   );
 }

TimerProgress.tsx

@@ -1,20 +1,24 @@
-import { useEffect, useState } from "react";
-import { emitter } from "./emitter";
-import { TickEvent } from "./TimerPage";
+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);
 
-  useEffect(() => {
+  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;