Here is a simplified version of my app. I want to mention that everything worked just fine before the latest SDK update and now whenever i press the back button it closes my app. Idk if it’s relevant that i use an IOS and expo to test the app.

I checked and the same thing happens on android. I couldnt find anything about this problem mainly because it used to work untill a week ago!

// App.js
    import React, { useEffect } from 'react';
    import { NavigationContainer } from '@react-navigation/native';
    import AppNavigator from './AppNavigator';
    import { BackHandler, Alert } from 'react-native';

const App = () => {
  useEffect(() => {
    const backAction = () => {
      Alert.alert("Hold on!", "Are you sure you want to go back?", [
        {
          text: "Cancel",
          onPress: () => null,
          style: "cancel"
        },
        { text: "YES", onPress: () => BackHandler.exitApp() }
      ]);
      return true;
    };

    const backHandler = BackHandler.addEventListener('hardwareBackPress', backAction);

    return () => backHandler.remove();
  }, []);

  return (
    <NavigationContainer>
      <AppNavigator />
    </NavigationContainer>
  );
};

export default App;




// MainPage.js
import React from 'react';
import { View, Text, Button } from 'react-native';

const MainPage = ({ navigation }) => {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Main Page</Text>
      <Button title="Go to Second Page" onPress={() => navigation.navigate('SecondPage')} />
    </View>
  );
};

export default MainPage;


import React from 'react';
import { View, Text, Button } from 'react-native';

const SecondPage = ({ navigation }) => {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Second Page</Text>
      <Button title="Go Back" onPress={() => navigation.goBack()} />
    </View>
  );
};

export default SecondPage;


// AppNavigator.js
import React from 'react';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import MainPage from './pages/MainPage';
import SecondPage from './pages/SecondPage';

const Stack = createNativeStackNavigator();

const AppNavigator = () => {
  return (
    <Stack.Navigator initialRouteName="MainPage">
      <Stack.Screen name="MainPage" component={MainPage} options={{ headerShown: false }} />
      <Stack.Screen name="SecondPage" component={SecondPage} />
    </Stack.Navigator>
  );
};

export default AppNavigator;