[iOS] Exiting layout animations break when rendered as sibling of absolute positioned element

[computerjazz]

Description

In Expo 49 iOS (dev-client and snack), exiting animations are broken for layout animations rendered as a sibling of an absolutely-positioned element, unless wrapped in an additional view.

Does not animate on exit:

  const [show, setShow] = useState(false);
  return (
    <View style={{ flex: 1 }}>
     <View style={{...StyleSheet.absoluteFillObject}} />
      <TouchableOpacity
        onPress={() => {
          setShow(true);
          setTimeout(() => setShow(false), 2000);
        }}>
        <Text>Trigger broken exiting animation</Text>
      </TouchableOpacity>
      {/** When Animated.View is a sibling of react-navigation children, exiting animations do not work */}
      {show && (
        <Animated.View
          entering={FadeIn.duration(1000)}
          exiting={FadeOut.duration(1000)}>
        </Animated.View>
      )}
    </View>
  );

Animates correctly on exit:

  const [show, setShow] = useState(false);
  return (
    <View style={{ flex: 1 }}>
     <View style={{...StyleSheet.absoluteFillObject}} />
      {/**When Animated.View is wrapped in an abolutely-positioned wrapper, exiting animations work */}
      <View style={StyleSheet.absoluteFill}>
        {show && (
          <Animated.View
            entering={FadeIn.duration(1000)}
            exiting={FadeOut.duration(1000)}/>
        )}
      </View>
      <TouchableOpacity
        onPress={() => {
          setShow(true);
          setTimeout(() => setShow(false), 2000);
        }}/>
    </View>
  );

(Possibly related, Animated.Views that are rendered as siblings to a react-navigation navigator also fail to animate)

Steps to reproduce

1. Create a component that renders an Animated.View with layout animations as a sibling of an absolutely-positioned element
2. Depending on how those animated views are wrapped, exiting animations may or may not work.

Snack or a link to a repository

https://snack.expo.dev/@easydan/layout-animation-exiting-ios-bug-2

Reanimated version

3.3.0

React Native version

0.72.3

Platforms

iOS

JavaScript runtime

Hermes

Workflow

Expo Dev Client

Architecture

Paper (Old Architecture)

Build type

Release mode

Device

iOS simulator

Device model

No response

Acknowledgements

Yes

[computerjazz]

upon further exploration, it seems like this issue isn't constrained to react-navigation (I updated OP to reflect this)

[angelo-hub]

Also seeing this :/