Android crashes on changing tab with formSheet opened inside

[alduzy]

Description

Navigating to another tab crashes the app if there's a screen with presentation: 'formSheet' currently opened in a nested stack.

Error: FragmentManager is already executing transactions

Happens on both architectures.

Screen.Recording.2024-10-03.at.11.50.31.mov

Steps to reproduce

reproduction code

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import React from 'react';
import { Button, StyleSheet, Text, View } from 'react-native';

function HomeScreen({ navigation }: { navigation: any }) {
  return (
    <View style={styles.container}>
      <Button
        title="Go to details"
        onPress={() => navigation.navigate('Details')}
      />
    </View>
  );
}

function DetailsScreen({ navigation }: { navigation: any }) {
  const handleChangeTab = () => {
    const history = navigation.getParent().getState().history;
    const isFirstTab = history[history.length - 1].key.includes('First');
    navigation.navigate(isFirstTab ? 'Second' : 'First');
  };
  return (
    <View style={styles.container}>
      <Text>Details</Text>
      <Button title="Dismiss" onPress={navigation.goBack} />
      <Button title="Change Tab" onPress={handleChangeTab} />
    </View>
  );
}

const Tab = createBottomTabNavigator();
const Stack = createNativeStackNavigator();

function InnerStack() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen
        name="Details"
        component={DetailsScreen}
        options={{
          presentation: 'formSheet',
          sheetAllowedDetents: [0.5, 1],
          unstable_screenStyle: { backgroundColor: 'white' },
        }}
      />
    </Stack.Navigator>
  );
}

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator screenOptions={{ headerShown: false }}>
        <Tab.Screen name="First" component={InnerStack} />
        <Tab.Screen name="Second" component={InnerStack} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

const styles = StyleSheet.create({
  container: { justifyContent: 'center', alignItems: 'center' },
});

1. Open the formSheet in a nested stack
2. Navigate to another tab without closing the formSheet

Snack or a link to a repository

repro pasted in "Steps to reproduce"

Screens version

4.0.0-beta.3

React Native version

0.75.0-rc.6

Platforms

Android

JavaScript runtime

Hermes

Workflow

React Native (without Expo)

Architecture

Paper (Old Architecture)

Build type

Debug mode

Device

Android emulator

Device model

No response

Acknowledgements

Yes

[github-actions]

Hey! 👋

The issue doesn't seem to contain a minimal reproduction.

Could you provide a snack or a link to a GitHub repository under your username that reproduces the problem?