How can I sync an entering/exiting animation of a child view with the layout transition of a parent view?

[itsramiel]

I have a Parent View that has a Child View as a child. The Child View has entering/exiting animations where it slides from the top. The Parent View has a linear layout transition to animate its height, however there is a delay in the transition.

Here is a sample code:

import {useState} from 'react';
import {Button, SafeAreaView} from 'react-native';
import Animated, {
  LinearTransition,
  SlideInUp,
  SlideOutUp,
} from 'react-native-reanimated';

function App() {
  const [isVisible, setIsVisible] = useState(true);

  return (
    <SafeAreaView
      style={{
        flex: 1,
        backgroundColor: 'white',
        justifyContent: 'space-between',
      }}>
      <Animated.View
        style={{backgroundColor: 'blue', overflow: 'hidden'}}
        layout={LinearTransition}>
        {isVisible ? (
          <Animated.View
            style={{height: 100, backgroundColor: 'green'}}
            exiting={SlideOutUp}
            entering={SlideInUp}
          />
        ) : null}
      </Animated.View>
      <Button title="toggle" onPress={() => setIsVisible(prev => !prev)} />
    </SafeAreaView>
  );
}

export default App;

Video of how it looks:

Simulator.Screen.Recording.-.iPhone.15.-.2024-04-24.at.10.11.43.mp4

What I would like is to have the entering/exiting animation be in sync with the layout transition. What is the best way to do that?

[MatiPl01]

Hey!

There is currently no possibility to sync layout transitions. They run independently and doesn't know of each other so probably you won't achieve the desired effect with the layout transition.

If you want to animate the parent together with the child, you can just stick to the layout={LinearTransition} property in the parent and remove entering and exiting animations from the child.