Entering and Exiting animations doesn't work with react new architecture

[flodlc]

Description

Hi, entering and exiting animations does not work at all with the new architecture, there is no error and the element appears but without any animation.
Works fine with the old architecture.
I have tried with canary versions too but it doesn't solve the issue.

Steps to reproduce

With the given versions, this code won't work on the new architecture but works well on the old architecture.

import { useState } from "react";
import { Button, View } from "react-native";
import Animated, { SlideInLeft, SlideOutDown } from "react-native-reanimated";

function App(): JSX.Element {
  const [animate, setAnimate] = useState(true);

  return (
    <View style={{ paddingTop: 100 }}>
      {animate && (
        <Animated.View
          entering={SlideInLeft.duration(2000)}
          exiting={SlideOutDown.duration(2000)}
        >
          <View style={{ backgroundColor: "orange", height: 30, width: 30 }} />
        </Animated.View>
      )}
      <Button title="animate" onPress={() => setAnimate(!animate)} />
    </View>
  );
}

export default App;

Snack or a link to a repository

Reanimated version

3.6.2

React Native version

0.73.4

Platforms

iOS

JavaScript runtime

Hermes

Workflow

React Native

Architecture

Fabric (New Architecture)

Build type

Debug app & dev bundle

Device

iOS simulator

Device model

No response

Acknowledgements

Yes

[github-actions]

Hey! 👋

The issue doesn't seem to contain a minimal reproduction.

Could you provide a snack or a link to a GitHub repository under your username that reproduces the problem?

[github-actions]

Hey! 👋

It looks like you've omitted a few important sections from the issue template.

Please complete Snack or a link to a repository section.

[Latropos]

@flodlc
Hi! The issue looks exactly like if you had reducedMotion on. https://docs.swmansion.com/react-native-reanimated/docs/device/useReducedMotion Is it possible that for some reason reducedMotion turns on on new architecture?

You can set reducedMotion both in your simulator and on your computer. I don't know how this feature behaves if you have two different settings.

[flodlc]

Thanks for your answer @Latropos, unfortunately reducedMotion is off. I tried everything, does it work on your side with the new architecture ?
I have the same issue on real devices, so it's probably not related to the device settings.

[tomekzaw]

Hey @flodlc, thanks for reporting this issue. Layout Animations are not implemented on Fabric yet, but we plan to start working on it very soon. Thanks for your understanding.

Duplicate of #3439.

[tomekzaw]

Closing this issue because it's a duplicate of #3439.

[flodlc]

Ok, I didn't find this information. Can't wait for it !

[faljabi]

It is still not working with me. Simple FadeIn animation is not animating in new arch? It is working fine with new arch disabled. Any tips?

[tomekzaw]

@faljabi What version of Reanimated are you on? Layout Animations are available on the New Architecture since 3.13.0 (see #6055).

[faljabi]

@faljabi What version of Reanimated are you on? Layout Animations are available on the New Architecture since 3.13.0 (see #6055).

"react-native-reanimated": "^3.15.4"

However I am on react-native/releases/tag/v0.76.0-rc.3. This could be the issue?

[tomekzaw]

Hmm, that should work just fine. cc @bartlomiejbloniarz Maybe you have any ideas?

Can you please try one more thing? In <View style={{ paddingTop: 100 }}>, add collapsable={false}.

[bartlomiejbloniarz]

@faljabi Have you checked all types of animations? Are all entering, layout and exiting animations not working? Can you share a code snippet?

[faljabi]

Hello guys @bartlomiejbloniarz, @tomekzaw,

Thank you for your prompt response.

Yes, I tried all types of animations. They do not work only when new arch is enabled. I tried the following:

• start npm with --reset-cache
• Reinstalled pods
• Deleted drived data folder
• Ensured babel plugin in place as per the docs

And nothing worked. I have not tried collapsable={false} yet because I reverted back to paper for now. But I will give it a try.

This is my FadeIn Component

import Animated, { FadeIn as FadeInAnimation, FadeOut as FadeOutAnimation } from 'react-native-reanimated';

const FadeIn = ({ style, enteringDelay = 300, exitingDelay = 300, children }) => {

    return (
        <Animated.View
            style={style}
            entering={enteringDelay && FadeInAnimation.delay(enteringDelay)}
            exiting={exitingDelay && FadeOutAnimation.delay(exitingDelay)}>
            {children}
        </Animated.View>
    );
};

export default FadeIn

[bartlomiejbloniarz]

@faljabi

There seems to be a problem with RN 0.76. Layout Animations should work fine on 0.75

[faljabi]

@bartlomiejbloniarz oh I see. Thank you for the update. I think I will wait till it gets out of rc.

[glicataeMotori]

In react native with expo sdk 52 still don't working.
all exiting animation
and some of the entering