Fix progress bar not showing on some pages - 2.2 🚀

Moving the bar  from App.tsx -> AppDrawer.tsx was a mistake,
because then the bar only shows on drawer routes instead of
app-wide.

App.tsx

@@ -17,6 +17,7 @@ import FatalError from "./FatalError";
 import { AppDataSource } from "./data-source";
 import { settingsRepo } from "./db";
 import { ThemeContext } from "./use-theme";
+import TimerProgress from "./TimerProgress";
 
 export const CombinedDefaultTheme = {
   ...NavigationDefaultTheme,
@@ -117,6 +118,7 @@ const App = () => {
       </NavigationContainer>
 
       <AppSnack textColor={paperTheme.colors.background} />
+      <TimerProgress />
     </PaperProvider>
   );
 };

AppDrawer.tsx

@@ -9,7 +9,6 @@ import PlanList from "./PlanList";
 import SetList from "./SetList";
 import SettingsPage from "./SettingsPage";
 import TimerPage from "./TimerPage";
-import TimerProgress from "./TimerProgress";
 import WeightList from "./WeightList";
 
 const Drawer = createDrawerNavigator<DrawerParams>();
@@ -24,63 +23,60 @@ export default function AppDrawer({
   const { dark } = useTheme();
 
   return (
-    <>
+    <Drawer.Navigator
-      <Drawer.Navigator
+      screenOptions={{
-        screenOptions={{
+        headerTintColor: dark ? "white" : "black",
-          headerTintColor: dark ? "white" : "black",
+        swipeEdgeWidth: 1000,
-          swipeEdgeWidth: 1000,
+        headerShown: false,
-          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={
+      />
-          (route.params.startup as keyof DrawerParams) || "History"
+      <Drawer.Screen
-        }
+        name="Timer"
-      >
+        component={TimerPage}
-        <Drawer.Screen
+        options={{ drawerIcon: () => <IconButton icon="timer-outline" /> }}
-          name="History"
+      />
-          component={SetList}
+      <Drawer.Screen
-          options={{ drawerIcon: () => <IconButton icon="history" /> }}
+        name="Weight"
-        />
+        component={WeightList}
-        <Drawer.Screen
+        options={{ drawerIcon: () => <IconButton icon="scale-bathroom" /> }}
-          name="Exercises"
+      />
-          component={ExerciseList}
+      <Drawer.Screen
-          options={{ drawerIcon: () => <IconButton icon="dumbbell" /> }}
+        name="Insights"
-        />
+        component={InsightsPage}
-        <Drawer.Screen
+        options={{
-          name="Plans"
+          drawerIcon: () => <IconButton icon="lightbulb-on-outline" />,
-          component={PlanList}
+        }}
-          options={{ drawerIcon: () => <IconButton icon="calendar-outline" /> }}
+      />
-        />
+      <Drawer.Screen
-        <Drawer.Screen
+        name="Settings"
-          name="Graphs"
+        component={SettingsPage}
-          component={GraphsList}
+        options={{ drawerIcon: () => <IconButton icon="cog-outline" /> }}
-          options={{
+      />
-            drawerIcon: () => <IconButton icon="chart-bell-curve-cumulative" />,
+    </Drawer.Navigator>
-          }}
-        />
-        <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,24 +1,21 @@
-import { useFocusEffect } from "@react-navigation/native";
+import { useEffect, useState } from "react";
-import { useCallback, useState } from "react";
 import { ProgressBar } from "react-native-paper";
-import { emitter } from "./emitter";
 import { TickEvent } from "./TimerPage";
+import { emitter } from "./emitter";
 
 export default function TimerProgress() {
   const [progress, setProgress] = useState(0);
 
-  useFocusEffect(
+  useEffect(() => {
-    useCallback(() => {
+    const description = emitter.addListener(
-      const description = emitter.addListener(
+      "tick",
-        "tick",
+      ({ minutes, seconds }: TickEvent) => {
-        ({ minutes, seconds }: TickEvent) => {
+        setProgress((Number(minutes) * 60 + Number(seconds)) / 210);
-          setProgress((Number(minutes) * 60 + Number(seconds)) / 210);
+        console.log({ minutes, seconds });
-          console.log({ minutes, seconds });
+      }
-        }
+    );
-      );
+    return description.remove;
-      return description.remove;
+  }, []);
-    }, [])
-  );
 
   if (progress === 0) return null;
 

android/app/build.gradle

@@ -85,8 +85,8 @@ android {
         applicationId "com.massive"
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 36216
+        versionCode 36217
-        versionName "2.1"
+        versionName "2.2"
     }
     signingConfigs {
         release {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "massive",
-  "version": "2.1",
+  "version": "2.2",
   "private": true,
   "license": "GPL-3.0-only",
   "scripts": {