Move debug banner to AppStack from AppDrawer

If we have it on the drawer instead of the stack it will
dissapear when navigating to certain screens.
This commit is contained in:
Brandon Presley 2024-02-15 15:26:14 +13:00
parent 3c0f4ce8ad
commit e3d3aad153
2 changed files with 101 additions and 101 deletions

View File

@ -10,7 +10,6 @@ import SetList from "./SetList";
import SettingsPage from "./SettingsPage"; import SettingsPage from "./SettingsPage";
import TimerPage from "./TimerPage"; import TimerPage from "./TimerPage";
import WeightList from "./WeightList"; import WeightList from "./WeightList";
import { StyleSheet, Text, View } from "react-native";
const Drawer = createDrawerNavigator<DrawerParams>(); const Drawer = createDrawerNavigator<DrawerParams>();
@ -24,86 +23,60 @@ export default function AppDrawer({
const { dark } = useTheme(); const { dark } = useTheme();
return ( return (
<> <Drawer.Navigator
{__DEV__ && ( screenOptions={{
<View style={styles.debugBanner}> headerTintColor: dark ? "white" : "black",
<Text style={styles.debugText}>DEBUG</Text> swipeEdgeWidth: 1000,
</View> headerShown: false,
)} }}
<Drawer.Navigator initialRouteName={
screenOptions={{ (route.params.startup as keyof DrawerParams) || "History"
headerTintColor: dark ? "white" : "black", }
swipeEdgeWidth: 1000, >
headerShown: false, <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>
</>
); );
} }
const styles = StyleSheet.create({
container: {
flex: 1,
},
debugBanner: {
position: 'absolute',
top: 0,
right: 0,
transform: [{ rotate: '45deg' }],
backgroundColor: 'red',
zIndex: 1000,
},
debugText: {
color: 'white',
padding: 5,
fontSize: 10,
},
});

View File

@ -13,6 +13,7 @@ import ViewGraph from "./ViewGraph";
import ViewSetList from "./ViewSetList"; import ViewSetList from "./ViewSetList";
import ViewWeightGraph from "./ViewWeightGraph"; import ViewWeightGraph from "./ViewWeightGraph";
import Weight from "./weight"; import Weight from "./weight";
import { View, Text, StyleSheet } from "react-native";
export type StackParams = { export type StackParams = {
Drawer: {}; Drawer: {};
@ -51,24 +52,50 @@ const Stack = createStackNavigator<StackParams>();
export default function AppStack({ startup }: { startup: string }) { export default function AppStack({ startup }: { startup: string }) {
return ( return (
<Stack.Navigator <>
screenOptions={{ headerShown: false, animationEnabled: false }} {__DEV__ && (
> <View style={styles.debugBanner}>
<Stack.Screen <Text style={styles.debugText}>DEBUG</Text>
name="Drawer" </View>
component={AppDrawer} )}
initialParams={{ startup }} <Stack.Navigator
/> screenOptions={{ headerShown: false, animationEnabled: false }}
<Stack.Screen name="EditSet" component={EditSet} /> >
<Stack.Screen name="EditSets" component={EditSets} /> <Stack.Screen
<Stack.Screen name="EditPlan" component={EditPlan} /> name="Drawer"
<Stack.Screen name="StartPlan" component={StartPlan} /> component={AppDrawer}
<Stack.Screen name="ViewGraph" component={ViewGraph} /> initialParams={{ startup }}
<Stack.Screen name="EditWeight" component={EditWeight} /> />
<Stack.Screen name="ViewWeightGraph" component={ViewWeightGraph} /> <Stack.Screen name="EditSet" component={EditSet} />
<Stack.Screen name="EditExercise" component={EditExercise} /> <Stack.Screen name="EditSets" component={EditSets} />
<Stack.Screen name="EditExercises" component={EditExercises} /> <Stack.Screen name="EditPlan" component={EditPlan} />
<Stack.Screen name="ViewSetList" component={ViewSetList} /> <Stack.Screen name="StartPlan" component={StartPlan} />
</Stack.Navigator> <Stack.Screen name="ViewGraph" component={ViewGraph} />
<Stack.Screen name="EditWeight" component={EditWeight} />
<Stack.Screen name="ViewWeightGraph" component={ViewWeightGraph} />
<Stack.Screen name="EditExercise" component={EditExercise} />
<Stack.Screen name="EditExercises" component={EditExercises} />
<Stack.Screen name="ViewSetList" component={ViewSetList} />
</Stack.Navigator>
</>
); );
} }
const styles = StyleSheet.create({
container: {
flex: 1,
},
debugBanner: {
position: 'absolute',
top: 20,
right: 50,
backgroundColor: 'red',
zIndex: 1000,
borderRadius: 5,
},
debugText: {
color: 'white',
padding: 5,
fontSize: 10,
},
});