react native - navigation.goBack() not working in expo 52 - Stack Overflow

I upgraded my expo react native app from expo sdk 51 to sdk 52 Fixed some minor errors but one came up and I cannot find the solution anywhere.

<NavigationContainer>
          <Stack.Navigator
            initialRouteName={
              storedCredentials ? "ErrandLandingScreen" : "OnboardingScreen"
            }
            screenOptions={({ navigation }) => ({
              headerShown: false,
              headerShadowVisible: false,
              headerTitle: "",
              headerTitleAlign: "center",
              headerStyle: {
                backgroundColor: colors.white,
                paddingHorizontal: 20,
              },
              animation: "fade",
              headerLeft: (props) => (
                <TouchableOpacity
                  {...props}
                  onPress={() => navigation.goBack()}
                  
                >
                  <Ionicons name="chevron-back-outline" size={23} />
                </TouchableOpacity>
              ),
            })}
          >
    //screens go here
    </Stack.Navigator>
    </NavigationContainer>

Above is my code. But the navigation.goBack() is not working again after the upgrade. Please help

I upgraded my expo react native app from expo sdk 51 to sdk 52 Fixed some minor errors but one came up and I cannot find the solution anywhere.

<NavigationContainer>
          <Stack.Navigator
            initialRouteName={
              storedCredentials ? "ErrandLandingScreen" : "OnboardingScreen"
            }
            screenOptions={({ navigation }) => ({
              headerShown: false,
              headerShadowVisible: false,
              headerTitle: "",
              headerTitleAlign: "center",
              headerStyle: {
                backgroundColor: colors.white,
                paddingHorizontal: 20,
              },
              animation: "fade",
              headerLeft: (props) => (
                <TouchableOpacity
                  {...props}
                  onPress={() => navigation.goBack()}
                  
                >
                  <Ionicons name="chevron-back-outline" size={23} />
                </TouchableOpacity>
              ),
            })}
          >
    //screens go here
    </Stack.Navigator>
    </NavigationContainer>

Above is my code. But the navigation.goBack() is not working again after the upgrade. Please help

• react-native
• expo
• navigation
• react-navigation

Share Improve this question Follow asked Nov 16, 2024 at 8:48 ReoReo 12322 silver badges1010 bronze badges 3

• Actually it turns out the headerleft or headerright just isn't clickable again That is why it does not work – Reo Commented Nov 16, 2024 at 18:06
• Do you know how to fix the header not clickable problem? – user2054522 Commented Dec 5, 2024 at 8:21
• headerLeft and headerRight is clickable, but it does not work. github/expo/expo/issues/32927 – user2573099 Commented Dec 6, 2024 at 4:11

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

Try using router.back() instead

import {router} from "expo-router";