LayoutAnim exit: keep the parent with ALL children there until animation is done

[hannojg]

I just have a case where a parent is being removed and deeply nested a child uses layout animations.

When the parent gets removed, the parent itself stays, then all the children - except for the layout animation views using exiting get removed. Check this video of a reproduction I did:

RPReplay_Final1643207038.mp4

Code for reproduction

import { useState } from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';
import Animated, { FadeOutUp, FadeInDown } from 'react-native-reanimated';

export default function App() {
const [isShow, setIsShow] = useState(true);

return (
  <View style={styles.container}>
    {isShow && (
      <View style={styles.box}>
        <Text>Hello i am a non animated element</Text>
        <Animated.View exiting={FadeOutUp} entering={FadeInDown}>
          <Text style={{ color: 'white' }}>I am animated</Text>
        </Animated.View>
      </View>
    )}
    <Button title="Toggle visibility" onPress={() => setIsShow((p) => !p)} />
  </View>
);
}

const styles = StyleSheet.create({
container: {
  flex: 1,
  alignItems: 'center',
  flexDirection: 'column',
  backgroundColor: '#fff',
  justifyContent: 'center',
},
box: {
  width: 200,
  height: 200,
  alignItems: 'center',
  justifyContent: 'center',
  backgroundColor: 'orange',
}
});

That the parent stays wouldn't be weird if the children would be kept.

To maybe get a better feeling for the weirdness watch this video from our app (the button Refund has a LayoutAnimation on it to change the content smoothly):

Screen.Recording.2022-01-26.at.3.35.38.PM.mov

You can see that for one moment it shows just the blank parent container with the layout animation exiting, which feels weird.

So I have two ideas for that:

• have the ability to change that all children are removed before the layout animation finishes
• don't keep the parent 😅

I have the feeling that neither of these proposals are technically possible (or maybe even make sense). It's just that I wasn't expecting that behaviour, and I thought it would be worth discussing?

(Any ideas on how to prevent that from happening are more than welcome <3 )