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 MaterialIcon from "react-native-vector-icons/MaterialCommunityIcons";
|
||||||
import AppSnack from "./AppSnack";
|
import AppSnack from "./AppSnack";
|
||||||
import AppStack from "./AppStack";
|
import AppStack from "./AppStack";
|
||||||
import TimerProgress from "./TimerProgress";
|
|
||||||
import { AppDataSource } from "./data-source";
|
import { AppDataSource } from "./data-source";
|
||||||
import { settingsRepo } from "./db";
|
import { settingsRepo } from "./db";
|
||||||
import { ThemeContext } from "./use-theme";
|
import { ThemeContext } from "./use-theme";
|
||||||
|
@ -37,6 +36,7 @@ export const CombinedDarkTheme = {
|
||||||
};
|
};
|
||||||
|
|
||||||
const App = () => {
|
const App = () => {
|
||||||
|
console.log("Re rendered app");
|
||||||
const systemTheme = useColorScheme();
|
const systemTheme = useColorScheme();
|
||||||
|
|
||||||
const [appSettings, setAppSettings] = useState({
|
const [appSettings, setAppSettings] = useState({
|
||||||
|
@ -108,7 +108,6 @@ const App = () => {
|
||||||
</NavigationContainer>
|
</NavigationContainer>
|
||||||
|
|
||||||
<AppSnack textColor={paperTheme.colors.background} />
|
<AppSnack textColor={paperTheme.colors.background} />
|
||||||
<TimerProgress />
|
|
||||||
</PaperProvider>
|
</PaperProvider>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
|
@ -11,6 +11,7 @@ import TimerPage from "./TimerPage";
|
||||||
import WeightList from "./WeightList";
|
import WeightList from "./WeightList";
|
||||||
import { DrawerParams } from "./drawer-param-list";
|
import { DrawerParams } from "./drawer-param-list";
|
||||||
import useDark from "./use-dark";
|
import useDark from "./use-dark";
|
||||||
|
import TimerProgress from "./TimerProgress";
|
||||||
|
|
||||||
const Drawer = createDrawerNavigator<DrawerParams>();
|
const Drawer = createDrawerNavigator<DrawerParams>();
|
||||||
|
|
||||||
|
@ -24,6 +25,7 @@ export default function AppDrawer({
|
||||||
const dark = useDark();
|
const dark = useDark();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
<>
|
||||||
<Drawer.Navigator
|
<Drawer.Navigator
|
||||||
screenOptions={{
|
screenOptions={{
|
||||||
headerTintColor: dark ? "white" : "black",
|
headerTintColor: dark ? "white" : "black",
|
||||||
|
@ -79,5 +81,7 @@ export default function AppDrawer({
|
||||||
options={{ drawerIcon: () => <IconButton icon="cog-outline" /> }}
|
options={{ drawerIcon: () => <IconButton icon="cog-outline" /> }}
|
||||||
/>
|
/>
|
||||||
</Drawer.Navigator>
|
</Drawer.Navigator>
|
||||||
|
<TimerProgress />
|
||||||
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -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 { ProgressBar } from "react-native-paper";
|
||||||
|
import { TickEvent } from "./TimerPage";
|
||||||
|
import { emitter } from "./emitter";
|
||||||
|
|
||||||
export default function TimerProgress() {
|
export default function TimerProgress() {
|
||||||
const [progress, setProgress] = useState(0);
|
const [progress, setProgress] = useState(0);
|
||||||
|
|
||||||
useEffect(() => {
|
useFocusEffect(
|
||||||
|
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 });
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
return description.remove;
|
return description.remove;
|
||||||
}, []);
|
}, [])
|
||||||
|
);
|
||||||
|
|
||||||
if (progress === 0) return null;
|
if (progress === 0) return null;
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue
Block a user