Fix back logic

EditPlan.tsx

@@ -6,7 +6,7 @@ import {
   useRoute,
 } from '@react-navigation/native';
 import React, {useCallback, useEffect, useState} from 'react';
-import {ScrollView, StyleSheet, View} from 'react-native';
+import {BackHandler, ScrollView, StyleSheet, View} from 'react-native';
 import {Button, IconButton, Text} from 'react-native-paper';
 import {MARGIN, PADDING} from './constants';
 import {DrawerParamList} from './drawer-param-list';
@@ -30,13 +30,22 @@ export default function EditPlan() {
   useFocusEffect(
     useCallback(() => {
       console.log(`${EditPlan.name}.focus:`, {plan});
-      navigation.getParent()?.setOptions({
+      navigation.setOptions({
         headerLeft: () => (
-          <IconButton icon="arrow-back" onPress={() => navigation.goBack()} />
+          <IconButton
+            icon="arrow-back"
+            onPress={() => navigation.navigate('Plans', {})}
+          />
         ),
         headerRight: () => null,
         title: plan.id ? 'Edit plan' : 'Create plan',
       });
+      const onBack = () => {
+        navigation.navigate('Plans', {});
+        return true;
+      };
+      BackHandler.addEventListener('hardwareBackPress', onBack);
+      return () => BackHandler.removeEventListener('hardwareBackPress', onBack);
     }, [navigation, plan]),
   );
 

EditSet.tsx

@@ -1,11 +1,13 @@
 import {
+  NavigationProp,
   RouteProp,
   useFocusEffect,
   useNavigation,
   useRoute,
 } from '@react-navigation/native';
 import React, {useCallback, useContext} from 'react';
-import {NativeModules, View} from 'react-native';
+import {BackHandler, NativeModules, View} from 'react-native';
+import {IconButton} from 'react-native-paper';
 import {PADDING} from './constants';
 import {DrawerParamList} from './drawer-param-list';
 import {SnackbarContext} from './MassiveSnack';
@@ -17,7 +19,7 @@ import {getSettings, settings, updateSettings} from './settings.service';
 export default function EditSet() {
   const {params} = useRoute<RouteProp<DrawerParamList, 'Edit set'>>();
   const {set, count, workouts} = params;
-  const navigation = useNavigation();
+  const navigation = useNavigation<NavigationProp<DrawerParamList>>();
   const {toast} = useContext(SnackbarContext);
 
   useFocusEffect(
@@ -29,7 +31,19 @@ export default function EditSet() {
         title = `${set.name} (${count + 1} / ${set.sets})`;
       navigation.setOptions({
         title,
+        headerLeft: () => (
+          <IconButton
+            icon="arrow-back"
+            onPress={() => navigation.navigate('Home', {})}
+          />
+        ),
       });
+      const onBack = () => {
+        navigation.navigate('Home', {});
+        return true;
+      };
+      BackHandler.addEventListener('hardwareBackPress', onBack);
+      return () => BackHandler.removeEventListener('hardwareBackPress', onBack);
     }, [navigation, set, count]),
   );
 

EditWorkout.tsx

@@ -1,11 +1,12 @@
 import {
+  NavigationProp,
   RouteProp,
   useFocusEffect,
   useNavigation,
   useRoute,
 } from '@react-navigation/native';
 import React, {useCallback, useContext, useState} from 'react';
-import {ScrollView, View} from 'react-native';
+import {BackHandler, ScrollView, View} from 'react-native';
 import DocumentPicker from 'react-native-document-picker';
 import {Button, Card, IconButton, TouchableRipple} from 'react-native-paper';
 import ConfirmDialog from './ConfirmDialog';
@@ -32,19 +33,27 @@ export default function EditWorkout() {
   );
   const [sets, setSets] = useState(params.value.sets?.toString() ?? '3');
   const {toast} = useContext(SnackbarContext);
-  const navigation = useNavigation();
+  const navigation = useNavigation<NavigationProp<DrawerParamList>>();
 
   useFocusEffect(
     useCallback(() => {
-      navigation.getParent()?.setOptions({
+      navigation.setOptions({
         headerLeft: () => (
-          <IconButton icon="arrow-back" onPress={() => navigation.goBack()} />
+          <IconButton
+            icon="arrow-back"
+            onPress={() => navigation.navigate('Workouts', {})}
+          />
         ),
         headerRight: null,
         title: params.value.name || 'New workout',
       });
-      if (!name) return;
-    }, [navigation, name, params.value.name]),
+      const onBack = () => {
+        navigation.navigate('Workouts', {});
+        return true;
+      };
+      BackHandler.addEventListener('hardwareBackPress', onBack);
+      return () => BackHandler.removeEventListener('hardwareBackPress', onBack);
+    }, [navigation, params.value.name]),
   );
 
   const update = async () => {

Routes.tsx

@@ -1,5 +1,5 @@
 import {createDrawerNavigator} from '@react-navigation/drawer';
-import {useNavigation} from '@react-navigation/native';
+import {NavigationProp, useNavigation} from '@react-navigation/native';
 import React, {useContext, useEffect, useState} from 'react';
 import {useColorScheme} from 'react-native';
 import {IconButton} from 'react-native-paper';
@@ -25,7 +25,7 @@ export default function Routes() {
   const [migrated, setMigrated] = useState(false);
   const dark = useColorScheme() === 'dark';
   const {setColor} = useContext(CustomTheme);
-  const navigation = useNavigation();
+  const navigation = useNavigation<NavigationProp<DrawerParamList>>();
 
   useEffect(() => {
     runMigrations()
@@ -77,12 +77,6 @@ export default function Routes() {
           component={route.component}
           options={{
             drawerItemStyle: {height: 0},
-            headerLeft: () => (
-              <IconButton
-                icon="arrow-back"
-                onPress={() => navigation.goBack()}
-              />
-            ),
           }}
         />
       ))}