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
This commit is contained in:
parent
be3af4db22
commit
d0f6550f29
3
App.tsx
3
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>
|
||||
);
|
||||
};
|
||||
|
|
112
AppDrawer.tsx
112
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={{
|
||||
headerTintColor: dark ? "white" : "black",
|
||||
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" />,
|
||||
<>
|
||||
<Drawer.Navigator
|
||||
screenOptions={{
|
||||
headerTintColor: dark ? "white" : "black",
|
||||
swipeEdgeWidth: 1000,
|
||||
headerShown: false,
|
||||
}}
|
||||
/>
|
||||
<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>
|
||||
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" />,
|
||||
}}
|
||||
/>
|
||||
<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 />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -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(() => {
|
||||
const description = emitter.addListener(
|
||||
"tick",
|
||||
({ minutes, seconds }: TickEvent) => {
|
||||
setProgress((Number(minutes) * 60 + Number(seconds)) / 210);
|
||||
}
|
||||
);
|
||||
return description.remove;
|
||||
}, []);
|
||||
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;
|
||||
|
||||
|
|
Loading…
Reference in New Issue
Block a user