Android RN 0.75.3, app crashes when returning to the previous screen

[Ngoca1k15PT]

Current behavior

When I return to the previous screen, the app crashes. I am using version RN 0.75.3. I have tested with other RN versions, and this issue occurs from version RN 0.75 onwards.

https://github.com/user-attachments/assets/57c8fb5b-d130-44cb-8e7b-c974592b4567

Expected behavior

I want the app not to crash when returning to the previous screen.

Reproduction

https://github.com/Ngoca1k15PT/AppNew

Platform

• [X] Android
• [ ] iOS
• [ ] Web
• [ ] Windows
• [ ] MacOS

Packages

• [ ] @react-navigation/bottom-tabs
• [X] @react-navigation/drawer
• [ ] @react-navigation/material-top-tabs
• [ ] @react-navigation/stack
• [X] @react-navigation/native-stack
• [ ] react-native-tab-view

Environment

"@react-navigation/drawer": "^6.7.2", "@react-navigation/native": "^6.1.18", "@react-navigation/native-stack": "^6.11.0", "react": "18.3.1", "react-native": "0.75.3", "react-native-safe-area-context": "^4.11.0", "react-native-screens": "^3.34.0", "react-native-reanimated": "^3.15.2",

[github-actions[bot]]

Couldn't find version numbers for the following packages in the issue:

• @react-navigation/stack

Can you update the issue to include version numbers for those packages? The version numbers must match the format 1.2.3.

[github-actions[bot]]

Hey! Thanks for opening the issue. Seems that this issue is related to react-native-screens library which is a dependency of React Navigation. Can you also post your issue in this repo so that it's notified to the maintainers of that library? This will help us fix the issue faster since it's upto the maintainers of that library to investigate it.

[Ngoca1k15PT]

Yes. I have reported my issue to notify the maintainers of the react-native-screens library. Thank you for your support.

[mrenann]

I have the same issue, it started happening when I activated the new architecture, using react native 0.75.3

[bhc777]

@Ngoca1k15PT @mrenann

me too ,use Material Top Tabs Navigator page , goback crashes the app on Android . remove Tab goback is OK!

https://github.com/user-attachments/assets/5a864211-529b-441d-a1af-94db67fb46cb

Have you found a solution? Please reply to me with help thanks . [email protected]

{
  "name": "MyApp",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "lint": "eslint .",
    "start": "react-native start",
    "test": "jest"
  },
  "dependencies": {
    "@react-native-masked-view/masked-view": "^0.3.2",
    "@react-navigation/material-top-tabs": "^7.0.0",
    "@react-navigation/native": "^7.0.0",
    "@react-navigation/native-stack": "^7.0.0",
    "react": "18.3.1",
    "react-native": "0.76.1",
    "react-native-gesture-handler": "^2.20.2",
    "react-native-pager-view": "^6.5.0",
    "react-native-safe-area-context": "^4.14.0",
    "react-native-screens": "^4.0.0",
    "react-native-tab-view": "^4.0.0"
  },
  "devDependencies": {
    "@babel/core": "^7.25.2",
    "@babel/preset-env": "^7.25.3",
    "@babel/runtime": "^7.25.0",
    "@react-native-community/cli": "15.0.0",
    "@react-native-community/cli-platform-android": "15.0.0",
    "@react-native-community/cli-platform-ios": "15.0.0",
    "@react-native/babel-preset": "0.76.1",
    "@react-native/eslint-config": "0.76.1",
    "@react-native/metro-config": "0.76.1",
    "@react-native/typescript-config": "0.76.1",
    "@types/react": "^18.2.6",
    "@types/react-test-renderer": "^18.0.0",
    "babel-jest": "^29.6.3",
    "eslint": "^8.19.0",
    "jest": "^29.6.3",
    "prettier": "2.8.8",
    "react-test-renderer": "18.3.1",
    "typescript": "5.0.4"
  },
  "engines": {
    "node": ">=18"
  }
}

// In App.js in a new project

import * as React from 'react';
import { View, Text } from 'react-native';
import {
  createStaticNavigation,
  useNavigation,
} from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { Button } from '@react-navigation/elements';

import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';

const Tab = createMaterialTopTabNavigator()

function HomeScreen() {
  const navigation = useNavigation();

  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
      <Button onPress={() => navigation.navigate('Details')}>
        Go to Details
      </Button>
    </View>
  );
}

function SettingsScreen() {
  const navigation = useNavigation();

  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>SettingsScreen Screen</Text>
      <Button onPress={() => navigation.navigate('Details')}>
        Go to Details
      </Button>
    </View>
  );
}


function DetailsScreen() {
  const navigation = useNavigation();

  return (
    <Tab.Navigator>
    <Tab.Screen name="Home" component={HomeScreen} />
    <Tab.Screen name="Settings" component={SettingsScreen} />
  </Tab.Navigator>
  );
}

function DetailsScreen2() {
  const navigation = useNavigation();

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

      
      <Text>Details Screen</Text>
      <Button onPress={() => navigation.navigate('Details')}>
        Go to Details... again
      </Button>
    </View>
  );
}

const RootStack = createNativeStackNavigator({
  initialRouteName: 'Home',
  screens: {
    Home: HomeScreen,
    Details: DetailsScreen,
  },
});

const Navigation = createStaticNavigation(RootStack);

export default function App() {
  return <Navigation />;
}

[fortunetalk]

any solution??

[bhc777]

@fortunetalk

can you try use navigation.setOptions({headerRight}) to back

I don't need to use MaterialTopTabsNavigator, TopNavBackButton, I just use the buttons to switch between screens Fan for example, I hope it helps you

`import React, { useState } from 'react'; import { StyleSheet, View, Text, Button } from 'react-native'; import { SafeAreaView } from 'react-native-safe-area-context';

const TopBar = () => { const [activeScreen, setActiveScreen] = useState('Screen1');

const renderScreen = () => {
    switch (activeScreen) {
        case 'Screen1':
            return <Text>这是屏幕 1</Text>;
        case 'Screen2':
            return <Text>这是屏幕 2</Text>;
        case 'Screen3':
            return <Text>这是屏幕 3</Text>;
        default:
            return null;
    }
};

const getButtonStyle = (screen) => {
    return activeScreen === screen ? styles.activeButton : styles.inactiveButton;
};

return (
   <>
        <View style={styles.buttonContainer}>
            <Button 
                title="屏幕 1" 
                onPress={() => setActiveScreen('Screen1')} 
                color={activeScreen === 'Screen1' ? '#007BFF' : '#000'} // 根据活动状态设置颜色
            />
            <Button 
                title="屏幕 2" 
                onPress={() => setActiveScreen('Screen2')} 
                color={activeScreen === 'Screen2' ? '#007BFF' : '#000'} // 根据活动状态设置颜色
            />
            <Button 
                title="屏幕 3" 
                onPress={() => setActiveScreen('Screen3')} 
                color={activeScreen === 'Screen3' ? '#007BFF' : '#000'} // 根据活动状态设置颜色
            />
        </View>
        <View style={styles.screenContainer}>
            {renderScreen()}
        </View>
        </>
);

};

const styles = StyleSheet.create({ buttonContainer: { flexDirection: 'row', justifyContent: 'space-around', marginBottom: 20, }, screenContainer: { padding: 20, borderWidth: 1, borderColor: '#ccc', }, button: { width: '33%', // 设置按钮宽度为屏幕宽度的 1/3 alignItems: 'center', // 使文本居中 }, buttonText: { textAlign: 'center', // 文本居中 }, activeButton: { backgroundColor: '#007BFF', // 活动按钮的背景色 padding: 10, borderRadius: 5, }, inactiveButton: { backgroundColor: '#ccc', // 非活动按钮的背景色 padding: 10, borderRadius: 5, }, });

export default TopBar; `

[jwmarb]

It seems that upon using the new RN architecture, I was experiencing issues with crashing and I found out the cause was react-native-tab-view. Unmounting the tabs crashes the application.

[bhc777]

@jwmarb 'react-native-pager-view'. After I update the lib's version to '6.6.1',

[jwmarb]

@jwmarb 'react-native-pager-view'. After I update the lib's version to '6.6.1',

I was about to post that right now, but awesome. This actually fixed the crashing 👍

[bhc777]

@jwmarb GOOD,讚！！

[adolfogc]

I encountered a similar issue on Android when using @react-navigation/native-stack with newArchEnabled=true and react-native-screens; switching to @react-navigation/stack fixed the problem.

[error-try-again]

I encountered a similar issue on Android when using @react-navigation/native-stack with newArchEnabled=true and react-native-screens; switching to @react-navigation/stack fixed the problem.

I was experiencing really nasty silent-ish runtime exception crashes in my app when navigating between @react-navigation/native-stack and @react-navigation/material-top-tabs screens on IOS and Android after migrating from 73 -> 77. I'm really glad I found your suggestion as this issue was driving me crazy.

[tremblerz]

In my case (and probably everyone else who is encountering this error), the issue is caused by the conflict between MaterialTopTabNavigator's way of unmounting components. When I explicitly unmount the top-tab navigator and add a slight timeout then it works completely fine. Below is the rough skeleton on how to fix the problem. @satya164 do you think this is still a react-native-screens issue?

// Safe navigation handler with tab unmounting
    const handleGoBack = () => {
        if (isNavigatingBack) return true;

        setIsNavigatingBack(true);
        setTimeout(() => {
            navigation.goBack();
        }, 100);

        return true;
    };

    // Reset navigation state when screen loses focus
    useEffect(() => {
        if (!isFocused) {
            setIsNavigatingBack(false);
        }
    }, [isFocused]);

    // Handle Android hardware back button
    useFocusEffect(
        React.useCallback(() => {
            if (Platform.OS === 'android') {
                backHandlerRef.current = BackHandler.addEventListener(
                    'hardwareBackPress',
                    handleGoBack,
                );

                return () => {
                    if (backHandlerRef.current) {
                        backHandlerRef.current.remove();
                    }
                };
            }
        }, []),
    );

return (
{!isNavigatingBack && (<Tab.Navigator ... ></Tab.Navigator>}
);