When returning to the main screen with the physical back button, it does not return from the directed screen

[nexquery]

Current behavior

While on the Home screen, I go to the Settings screen. When I return to the Home screen with the physical back button, there's no problem. However, when I press the physical back button again while on the Home screen, it takes me back to the phone's home screen and the app is put in the background. When I open the app again, the Home screen opens. If I press the physical back button while on the Settings screen, the app is put in the background again.

import { Text, View, TouchableOpacity } from "react-native";
import { SafeAreaProvider } from "react-native-safe-area-context";
import { NativeStackScreenProps } from "@react-navigation/native-stack";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import { NavigationContainer } from "@react-navigation/native";

export type RootStackParamList = {
    Home: undefined;
    Settings: undefined;
};

export type StackScreenProps<RouteName extends keyof RootStackParamList> = NativeStackScreenProps<RootStackParamList, RouteName>;

const RootStack = createNativeStackNavigator<RootStackParamList>();

export default function App() {
    return (
        <SafeAreaProvider>
            <NavigationContainer>
                <RootStack.Navigator screenOptions={{ headerShown: false, animation: 'fade' }}>
                    <RootStack.Screen name="Home" component={Screen_Home} options={{ statusBarStyle: 'dark', statusBarTranslucent: true }} />
                    <RootStack.Screen name="Settings" component={Screen_Settings} options={{ statusBarStyle: 'dark', statusBarTranslucent: true }} />
                </RootStack.Navigator>
            </NavigationContainer>
        </SafeAreaProvider>

    );
}

export function Screen_Home({ navigation, route }: StackScreenProps<'Home'>)
{
    const goSettings = () => {
        console.log("goSettings");
        navigation.navigate('Settings');
    }

    return (
        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
            <Text>Home</Text>
            
            <TouchableOpacity activeOpacity={0.7} style={{ padding: 10, backgroundColor: 'black', borderRadius: 8, marginTop: 20 }} onPress={goSettings}>
                <Text style={{ fontWeight: 'bold', color: 'white' }}>Settings</Text>
            </TouchableOpacity>
        </View>
    )
}

export function Screen_Settings({ navigation, route }: StackScreenProps<'Settings'>)
{
    return (
        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
            <Text>Settings</Text>
        </View>
    )
}

2025-09-09.22-39-31.mp4

Expected behavior

When I press the physical back button while on the Home screen, the app goes to the background. When I re-enter the app and go to Settings, pressing the physical back button should take me back to the Home screen.

Reproduction

Hopefully the issue is clear enough, that this is not needed.

Platform

• Android
• iOS
• Web
• Windows
• MacOS

Packages

• @react-navigation/bottom-tabs
• @react-navigation/drawer
• @react-navigation/material-top-tabs
• @react-navigation/stack
• @react-navigation/native-stack
• react-native-drawer-layout
• react-native-tab-view

Environment

• [] I've removed the packages that I don't use

package	version
@react-navigation/native	^7.1.17
@react-navigation/native-stack	^7.3.26
react-native-screens	^4.16.0
react-native-safe-area-context	^5.6.1
react-native-gesture-handler	^2.28.0
react-native-reanimated	^4.1.0
react-native	0.81.1

[github-actions]

Hey @nexquery! Thanks for opening the issue. It seems that the issue doesn't contain a link to a repro, or the provided repro is not valid (e.g. broken link, private repo, code doesn't run etc.).

The best way to get attention to your issue is to provide an easy way for a developer to reproduce the issue.

You can provide a repro using any of the following:

• Expo Snack
• TypeScript Playground
• GitHub repo under your username

A snack link is preferred since it's the easiest way to both create and share a repro. If it's not possible to create a repro using a snack, link to a GitHub repo under your username is a good alternative. Don't link to a branch or specific file etc. as it won't be detected.

Try to keep the repro as small as possible by narrowing down the minimal amount of code needed to reproduce the issue. Don't link to your entire project or a project containing code unrelated to the issue. See "How to create a Minimal, Reproducible Example" for more information.

You can edit your original issue to include a link to the repro, or leave it as a comment. The issue will be closed automatically after a while if you don't provide a valid repro.

[withSang]

Sadly I'm having the exact same issue. Have you ever found a solution?

[nexquery]

Sadly I'm having the exact same issue. Have you ever found a solution?

It seems like an emulator bug. This problem doesn't occur on the physical phone. However, the animation seems to have an explosion effect.

[withSang]

Thank you for confirming. I'm having the same issue on my Galaxy S24 running Android 16. I think I should give it a try with different Android versions and devices.

[Daniel3711997]

Same issue here....

[withSang]

I confirm this issue only happens on Android 16 devices.... :'( I'll look into it

[withSang]

@nexquery @Daniel3711997 Oh, it was duplicate of #12366 .
Hope you have a nice day :)

[Daniel3711997]

So the fix is:

tools:replace="android:enableOnBackInvokedCallback"
android:enableOnBackInvokedCallback="false"

?

[withSang]

So the fix is:

tools:replace="android:enableOnBackInvokedCallback"
android:enableOnBackInvokedCallback="false"

?

Yes, also make sure to check if the other libraries listen to BackHandler.

[nexquery]

So the fix is:
tools:replace="android:enableOnBackInvokedCallback"
android:enableOnBackInvokedCallback="false"
?

Yes, also make sure to check if the other libraries listen to BackHandler.

Just adding this code solved my problem

android:enableOnBackInvokedCallback="false"

The BackHandler is working properly.

export function Screen_Settings({ navigation, route }: StackScreenProps<'Settings'>)
{
    useEffect(() =>
    {
        const backAction = () =>
        {
            Alert.alert("Warning", "Do you want to go back?",
            [
                {
                    text: "No",
                    onPress: () => null,
                    style: "cancel"
                },
                {
                    text: "Yes",
                    onPress: () => navigation.goBack()
                }
            ]);
            return true;
        };

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

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

    return (
        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
            <Text>Settings</Text>
        </View>
    )
}

[Siddhantshelake]

I’m aware that disabling android:enableOnBackInvokedCallback="false" temporarily restores the old back behavior on Android 16, but that’s not a long-term solution.

Specifically, on Android 16 devices, pressing the physical back button should navigate to the previous screen in the navigation stack, rather than exiting the app or going to the device home screen.
Right now, returning to the main screen from a directed screen does not behave as expected when predictive back gestures are enabled.

I’m looking for guidance on the best way to handle this:

Are there recommended approaches in React Navigation to fully support Android 16+ predictive back gestures?

Are there plans for built-in support for this behavior in upcoming releases?

[Siddhantshelake]

I’m aware that disabling android:enableOnBackInvokedCallback="false" temporarily restores the old back behavior on Android 16, but that’s not a long-term solution.

Specifically, on Android 16 devices, pressing the physical back button should navigate to the previous screen in the navigation stack, rather than exiting the app or going to the device home screen. Right now, returning to the main screen from a directed screen does not behave as expected when predictive back gestures are enabled.

I’m looking for guidance on the best way to handle this:

Are there recommended approaches in React Navigation to fully support Android 16+ predictive back gestures?

Are there plans for built-in support for this behavior in upcoming releases?

Why This Happens

Android 16 no longer calls onBackPressed() or dispatches KEYCODE_BACK for apps targeting API level 36+.

React Native still depends on these legacy callbacks (onBackPressed() → ReactInstanceManager.onBackPressed() → JS BackHandler).

As a result, when predictive back is active, React Native never receives the back event, and Android assumes the activity should exit — causing the app to close.

Any sample code, patch, or guidance would be greatly appreciated 🙏