After opening any modal after fullscreen modal, views are changed without animation

[tboba]

Description

After trying to nest any modal to fullscreen modal, application doesn't display any animation (views are changed immediately).

https://github.com/software-mansion/react-native-screens/assets/23281839/508d875c-8c8d-45c3-8879-e5496388bd07

(in the preview, fullscreen modal is represented as transparent modal)

Steps to reproduce

import React from 'react';
import {Button, View} from 'react-native';
import {NavigationContainer, ParamListBase} from '@react-navigation/native';
import {
  createNativeStackNavigator,
  NativeStackNavigationProp,
} from 'react-native-screens/native-stack';

import {GestureHandlerRootView, ScrollView} from 'react-native-gesture-handler';

const Stack = createNativeStackNavigator();

function Main({
  navigation,
}: {
  navigation: NativeStackNavigationProp<ParamListBase>;
}) {
  return (
    <ScrollView contentInsetAdjustmentBehavior="automatic">
      <Button title="Open modal" onPress={() => navigation.navigate('ModalFullscreen')} />
    </ScrollView>
  );
}

function Modal({
  navigation,
}: {
  navigation: NativeStackNavigationProp<ParamListBase>;
}) {
  return (
    <View style={{backgroundColor: 'bisque'}}>
      <Button title="Open modal" onPress={() => navigation.navigate('Modal')} />
      <Button
        title="Open transparent modal"
        onPress={() => navigation.navigate('ModalFullscreen')}
      />
      <Button
        title="Open contained modal"
        onPress={() => navigation.navigate('ModalContained')}
      />
    </View>
  );
}

export default function App() {
  return (
      <GestureHandlerRootView style={{flex: 1}}>
      <NavigationContainer>
        <Stack.Navigator
          screenOptions={{
            fullScreenSwipeEnabled: true,
            stackAnimation: 'fade_from_bottom',
            customAnimationOnSwipe: true,
            headerLargeTitle: true,
            // headerTranslucent: true,
          }}>
          <Stack.Screen name="Main" component={Main} />
          <Stack.Screen
            name="Modal"
            component={Modal}
            options={{stackPresentation: 'modal'}}
          />
          <Stack.Screen
            name="ModalFullscreen"
            component={Modal}
            options={{stackPresentation: 'fullScreenModal'}}
          />
          <Stack.Screen
            name="ModalContained"
            component={Modal}
            options={{stackPresentation: 'containedModal'}}
          />
        </Stack.Navigator>
      </NavigationContainer>
    </GestureHandlerRootView>
   );
}

1. Create a screen that opens fullscreen modal.
2. In this view add an option to open any desired modal (eg. modal / contained modal).
3. Launch an application and try to open modal inside a fullscreen modal.

Snack or a link to a repository

https://github.com/software-mansion/react-native-screens/blob/%40tboba/issue1819-test/FabricTestExample/src/Test1819.tsx

Screens version

3.22.1

React Native version

0.72.0-rc.5

Platforms

iOS

JavaScript runtime

None

Workflow

React Native (without Expo)

Architecture

Fabric (New Architecture)

Build type

Debug mode

Device

iOS simulator

Device model

iPhone 14 PRo (iOS 16.4)

Acknowledgements

Yes

[github-actions[bot]]

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?