[ios] transitionDuration is not interrupted correctly

[freeboub]

Description

When using react-native-screens on ios, the prop transition is not coherently interrupted.
reproduced with fabric & react native 0.77.

• I push a screen with an animation of 10 sec
• after 5sec, I umount the screen
• I am expecting the screen animation (slide up) to be canceled and the screen starts the scroll down animation.
• But instead:
  • The animation jump to the end directly.
  • The scroll down animation start only at the end of first animation (so here 5 seconds after the slide down request)

Here is a video of the issue:

Simulator.Screen.Recording.-.iPhone.16.Pro.-.2025-02-04.at.16.55.57.mp4

I was not able to clearly / easily reproduce the issue on android due to: #2666

Steps to reproduce

Here is the sample code to reproduce the issue:

 const [childDisplayed, setChildDisplayed] = useState(false);

  // autoclose the view
  useEffect(() => {
    if (childDisplayed) {
      setTimeout(() => {
        setChildDisplayed(false);
      }, 5000);
    }
  }, [childDisplayed]);

  return (
    <SafeAreaView style={{ backgroundColor: 'white', height: '100%' }}>
    <ScreenStack style={StyleSheet.absoluteFill}>
      <Screen
        key="parent"
        activityState={2}
        style={StyleSheet.absoluteFill}>
        <Pressable
            style={styles.pressable}
            onPress={() => {
              setChildDisplayed(true);
            }}/>
      </Screen>
      {childDisplayed ? (
        <Screen
          key="child"
          activityState={2}
          transitionDuration={10000}
          isNativeStack
          stackAnimation={'slide_from_bottom'}
          style={StyleSheet.absoluteFill}>
            <View style={styles.square}/>
        </Screen>) :
        <></> }
    </ScreenStack>
    </SafeAreaView>
  );

Snack or a link to a repository

https://github.com/freeboub/bug-react-native-screens-modal-animation

Screens version

4.6.0

React Native version

0.77.0

Platforms

Android

JavaScript runtime

Hermes

Workflow

React Native (without Expo)

Architecture

Fabric (New Architecture)

Build type

Debug mode

Device

Android emulator

Device model

No response

Acknowledgements

Yes