[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 :/

[aymather]

Also having this problem :/ any updates?

[martinezguillaume]

Also having this problem but slightly different, but still :

// Doesn't work
<>
      <View style={[StyleSheet.absoluteFill, { backgroundColor: 'orange' }]} />
      {show && (
        <Animated.View
          entering={FadeIn.duration(1000)}
          exiting={FadeOut.duration(1000)}>
        </Animated.View>
      )}
</>

// Is working if absolute view doesn't have backgroundColor
<>
      <View style={StyleSheet.absoluteFill} />
      {show && (
        <Animated.View
          entering={FadeIn.duration(1000)}
          exiting={FadeOut.duration(1000)}>
        </Animated.View>
      )}
</>

// Is working if animated view is wrapped with absolute view
<>
      <View style={[StyleSheet.absoluteFill, { backgroundColor: 'orange' }]} />
      <View style={StyleSheet.absoluteFill}>
        {show && (
          <Animated.View
            entering={FadeIn.duration(1000)}
            exiting={FadeOut.duration(1000)}>
          </Animated.View>
        )}
      </View>
</>

[headfire94]

// Is working if absolute view doesn't have backgroundColor

Seems like element with absolute position overlaps the one you animate when exit animation happens (this can be proved by setting opacity 0.5 to absolute positioned one). Alternative solution is also set zIndex for Animated.View to force showing it above absolute positioned element

[headfire94]

@Szymon20000 can you elaborate on how element is positioned once exiting animation start, to understand how to fix such issues