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).

Nesting.any.modal.to.fullscreen.modal.mov

(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]

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?

[alduzy]

Hi @tboba I was trying to reproduce the issue with the latest version of screens and could not.
I tried with both react-native-screens/native-stack and @react-navigation/native-stack.
I also checked if I could trigger the bug using popTo method in react navigation v7 as the navigate method no longer goes back but it's all working fine. I am closing the issue as resolved. Let me know in case you're still experiencing the problem.