Layout Animation not working as expected with other view

Description

I’m try to use layout animtion with other view of react native. But i think, Layout Animation just create a copy element to animate not like animte layout as docs mentioned

Expected behavior

Animate my view same the docs

Actual behavior & steps to reproduce

Let’s see my code and my video

Snack or minimal code example

https://user-images.githubusercontent.com/43195241/150716485-7e59b651-0162-4a86-8c9d-530cee51a79d.mp4

import React, {memo, useState} from 'react';
import isEqual from 'react-fast-compare';
import {Button, Text, View} from 'react-native';
import Animated, {FadeIn, FadeOut, Layout} from 'react-native-reanimated';

const LoginComponent = () => {
  const [visible, setVisible] = useState<boolean>(false);
  // render
  return (
    <View style={{flex: 1, paddingVertical: 50}}>
      <Button
        title={'Toggle'}
        onPress={() => {
          setVisible(v => !v);
        }}
      />
      <Animated.View layout={Layout} style={{backgroundColor: 'green'}}>
        <Text>Layout</Text>
        {visible && (
          <Animated.View
            layout={Layout}
            entering={FadeIn}
            exiting={FadeOut}
            style={{width: 50, height: 50, backgroundColor: 'red'}}
          />
        )}
      </Animated.View>
      <View style={{backgroundColor: 'yellow', paddingVertical: 10}}>
        <Text>My Text</Text>
      </View>
    </View>
  );
};
export const Login = memo(LoginComponent, isEqual);

Package versions

name	version
react-native	0.66.4
react-native-reanimated	2.3.1

Affected platforms

• Android
• [x ] iOS
• Web

[frankpena06]

ok. with a more complex screen and want to use layout animation inside, i can’t use Animted.View for all parent.

I faced an issue like this. You just need to cover your parent element in <Animated.View/> Tag.

` <Animated.View style={{flex: 1, paddingVertical: 50}}> <Button title={‘Toggle’} onPress={() => { setVisible(v => !v); }} />

  <Animated.View layout={Layout} style={{backgroundColor: 'green'}}>
    <Text>Layout</Text>
    {visible && (
      <Animated.View
        layout={Layout}
        entering={FadeIn}
        exiting={FadeOut}
        style={{width: 50, height: 50, backgroundColor: 'red'}}
      />
    )}
  </Animated.View>
  <View style={{backgroundColor: 'yellow', paddingVertical: 10}}>
    <Text>My Text</Text>
  </View>

</Animated.View>

`

[tomekzaw]

Hello! Can you please clarify what is the expected behaviour?

If you want the yellow box to animate smoothly to its target position instead of jumping immediately, please convert the component to Animated.View and use layout prop, similarly as for the green box:

-<View style={{backgroundColor: 'yellow', paddingVertical: 10}}>
+<Animated.View layout={Layout} style={{backgroundColor: 'yellow', paddingVertical: 10}}>
  <Text>My Text</Text>
-</View>
+</Animated.View>

Alternatively, if the issue is related to the red box layout animation when toggling it on and off faster than the duration of the animation, please clarify what is the expected behaviour so we can help you! 😄