Entering/Exiting animations don't work in Android development build

[ryebytescode]

Description

The layout animations work just fine when the app is ran inside Expo Go, but does not run when using Android development builds. I'm using Expo (SDK 51). My development OS is Windows 11. I use a physical Android device, haven't tried on an emulator though. I've already tried the following

1. npx expo start -c
2. npx expo prebuild --clean
3. Listed react-native-reanimated/plugin inside babel.config.js

Here's the output when using Expo Go

https://github.com/user-attachments/assets/6c492a8f-1492-4ed3-a78c-fb113b2e55a9

Using development build

https://github.com/user-attachments/assets/038c0143-a509-4093-a7a6-8aba06504701

Steps to reproduce

1. npx expo prebuild --clean
2. npx expo run:android --device
3. Select the physical device

Snack or a link to a repository

https://github.com/nobrelli/construlink

Reanimated version

3.10.1

React Native version

0.74.5

Platforms

Android

JavaScript runtime

Hermes

Workflow

Expo Go

Architecture

Fabric (New Architecture)

Build type

Debug app & dev bundle

Device

Real device

Device model

Infinix X6827 (Android 12)

Acknowledgements

Yes

[Malberee]

same

[patrycjakalinska]

Hi, your link to a repository is not working, it seems like it's private. Could you change it so we can inspect the issue?

[ryebytescode]

I'm sorry @patrycjakalinska . I restructured my project. You can take a look at the repo again.

[ryebytescode]

I think I found the issue. I just disabled the New Arch and everything works now. I'm still not sure why react-native-reanimated glitches under the new arch.

[
	"expo-build-properties",
	{
		"android": {
			"newArchEnabled": true
		},
		"ios": {
			"newArchEnabled": true
		}
	}
],

[patrycjakalinska]

It seems like this issue was resolved in newer versions of Reanimated. Update to latest version and keep newArchEnabled: true - everything should work just fine. I'll close the issue, but feel free to comment if you have any problems and we will reopen then.

[ElSierra]

exiting and entering animation still not working on android on New Architecture

"react-native-reanimated": "~3.16.3", "react-native": "0.76.3", "expo": "~52.0.11"

[ryebytescode]

Hi @ElSierra are you using development builds too?

[ElSierra]

@nobrelli Yes I am

[ryebytescode]

I thought it was just me because I had this weird behavior a month ago ever since I upgraded to v52. That's why I reverted back to v51 and everything worked again.

[ElSierra]

I thought it was just me because I had this weird behavior a month ago ever since I upgraded to v52. That's why I reverted back to v51 and everything worked again.

Expo v51 with new architecture off or on ?

[ryebytescode]

Yes, it's turned off

[jonhy751]

i have same problem, not nothing correction?

[chiefchief]

I have a similar case — I’ve created an animated ActivityIndicator using Animated.createAnimatedComponent(ActivityIndicator) On Android, when I add:

entering={FadeIn}
exiting={FadeOut}

the space for the indicator is rendered (it pushes other content), but the indicator itself is not visible

"react-native": "0.80.0", "react-native-reanimated": "^3.18.0",

[abu-bakar-assurex]

I have a similar case — I’ve created an animated ActivityIndicator using Animated.createAnimatedComponent(ActivityIndicator) On Android, when I add:

entering={FadeIn}
exiting={FadeOut}

the space for the indicator is rendered (it pushes other content), but the indicator itself is not visible

"react-native": "0.80.0", "react-native-reanimated": "^3.18.0",

i am also facing the same issue.

[github-actions[bot]]

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?

[abu-bakar-assurex]

Minimal Reproducible Example with new architecture enabled

import Animated, {
  FadeInDown
} from 'react-native-reanimated';
import { SafeAreaView, StyleSheet, ActivityIndicator } from 'react-native';

const AnimatedActivityIndicator =
  Animated.createAnimatedComponent(ActivityIndicator);

export default function AnimatedStyleUpdateExample() {

  return (
    <SafeAreaView style={styles.container}>
      <AnimatedActivityIndicator
        entering={FadeInDown.delay(1000)}
        size={"large"}
        color={"red"}
      />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
});

[patrycjakalinska]

hi, after some investigation I see there is no issue and everything works on latest versions. I've used @abu-bakar-assurex minimal reproduction with additional Animated.View to show that everything works c:

Please update to the following versions, reset cache (or eventually start on fresh app) and thell me if it solved it for you.

    "react-native": "0.80",
    "react-native-reanimated": "3.19.0",

https://github.com/user-attachments/assets/6e4de450-768b-4ff9-8249-d96e5350bef2

code used

import Animated, {
  FadeInDown,
  FadeOutUp,
  ZoomInUp
} from 'react-native-reanimated';
import { useState } from 'react';
import { SafeAreaView, StyleSheet, ActivityIndicator, Button } from 'react-native';

const AnimatedActivityIndicator =
  Animated.createAnimatedComponent(ActivityIndicator);

export default function AnimatedStyleUpdateExample() {
  const [show, setShow] = useState(true);


  return (
    <SafeAreaView style={styles.container}>
      <Button title="Toggle Activity Indicator" onPress={() => setShow(!show)} />
      {show && <AnimatedActivityIndicator
        entering={FadeInDown.delay(300)}
        exiting={FadeOutUp.delay(300)}
        size={"large"}
        color={"red"}
      />}
      {show && <Animated.View style={{ width: 100, height: 100, backgroundColor: 'blue' }} entering={FadeInDown.delay(500)} exiting={FadeOutUp.delay(500)} />}
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'space-between',
    padding: 32,
    marginBottom: 80
  },
});

[abu-bakar-assurex]

Hi @patrycjakalinska yes it is working on "react-native-reanimated": "3.19.0". i was previously using "react-native-reanimated": "3.17.4".

Thanks for your help!

[pekq]

Can confirm that none of the entering or exiting animations are working on Android + Fabric.

"react-native-reanimated": "3.19.2"
"expo": "54.0.13"
"react-native": "0.81.4"

[patrycjakalinska]

hi @pekq, I've checked and it works good in snack. Are you running this in prod or development? Are you using physical device or emulator? Could you past me your minimal reproduction code? Thanks!

https://github.com/user-attachments/assets/e294f824-1ee2-48bf-bff9-b51cef1d4b3d