exiting animation keeps in android view mount in 3.17.0

[joacub]

Description

when using Reanimated.View exiting=(something) this view keeps mount in android and if for example as an absolute position nothing will be able to be touch as the view is over everything because never disappear

Steps to reproduce

install last reanimated version 3

Snack or a link to a repository

no link

Reanimated version

3.17.0

React Native version

0.77.1

Platforms

Android

JavaScript runtime

None

Workflow

None

Architecture

Paper (Old Architecture)

Build type

Release app & dev bundle

Device

None

Device model

No response

Acknowledgements

Yes

[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?

[joacub]

{!isSplashAnimationComplete && showSkeleton && (
          <Reanimated.View
            exiting={FadeOut.duration(750).easing(Easing.quad)}
            style={[
              StyleSheet.absoluteFill,
              styles.logoStyle,
              {
                zIndex: 9999999,
              },
            ]}
          >
            {customComponent ? (
              <Animated.View
                style={_dynamicCustomComponentStyle(logoScale, logoOpacity, logoWidth, logoHeight)}
              >
                {customComponent}
              </Animated.View>
            ) : (
              <Animated.Image
                source={defaultImage}
                fadeDuration={0}
                resizeMode="contain"
                style={_dynamicLogoStyle(logoScale, logoOpacity, logoWidth, logoHeight)}
              />
            )}
          </Reanimated.View>
        )}

[MatiPl01]

Thanks @joacub for reporting the issue. I was able to reproduce it on the Old Architecture (the New Architecture works fine) but this definitely should also work on the Old Architecture.

I am adding this simplified example with a recording for easier reproduction.

Code example

import React, { useState } from 'react';
import { Button, StyleSheet, View } from 'react-native';
import Animated, { Easing, FadeOut } from 'react-native-reanimated';

export default function EmptyExample() {
  const [showSkeleton, setShowSkeleton] = useState(false);

  return (
    <View style={styles.container}>
      <>
        <Animated.View style={{ height: 100, width: 100 }}>
          {showSkeleton && (
            <Animated.View
              exiting={FadeOut.duration(750).easing(Easing.quad)}
              style={[
                StyleSheet.absoluteFill,
                {
                  backgroundColor: 'blue',
                  zIndex: 9999999,
                },
              ]}
            />
          )}
          <Animated.View style={{ flex: 1, backgroundColor: 'red' }}>
            <Button
              title="Test"
              onPress={() => {
                console.log('test');
              }}
            />
          </Animated.View>
        </Animated.View>
        <Button
          title="Toggle Skeleton"
          onPress={() => setShowSkeleton(!showSkeleton)}
        />
      </>
    </View>
  );
}

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

https://github.com/user-attachments/assets/23bb0a77-43e9-407d-bdfe-774f93db60b7

[joacub]

Thanks @joacub for reporting the issue. I was able to reproduce it on the Old Architecture (the New Architecture works fine) but this definitely should also work on the Old Architecture.

I am adding this simplified example with a recording for easier reproduction.

Code example Screen.Recording.2025-03-03.at.19.00.38.mp4

Yeah thanks for your help

[davoam]

We have the same issue. It happens only on Android with ReactNative version 0.76 and disabled new architecture. Downgrading to 3.16.7 helps. It appeared in 3.17.0 and it's reproduciable in 3.17.1

[iffa]

Ran into the same issue, removing exiting animation works, but we also opted for downgrading to 3.16.7 until this is fixed

[ironchestgames]

I got the same issue in 3.17.1, downgraded to 3.16.7 temporarily. I hope this gets fixed, because the other fixes in 3.17.x was good!

[irekrog]

same issue

• [email protected]
• [email protected]
• old architecture

[irekrog]

do you have any workarounds other than downgrading react-native and react-native-reanimated to 3.16?

[NikitaDudin]

same issue

• [email protected]
• [email protected]
• old architecture

[csnvrl]

same issue

• [email protected]
• [email protected]
• old architecture

I don't want to downgrade the reanimated version (3.16.7) because, according to the compatibility table, it is not compatible with my RN version.

[irekrog]

fyi, [email protected] still issue

[christophemenager]

Arf, took me a while to find the root cause of my issue, but I am in the same scenario:

• [email protected]
• [email protected]
• old architecture

The view is not removed and this can cause no pressable to be triggered.

This is quite tricky to link to this library :/

[bartlomiejbloniarz]

You can use this patch until we release a fix: react-native-reanimated+3.17.5.patch

[enbochen]

fyi 3.18.0 still have the issue. The patch works.

[patlux]

Same issue. It works with 3.19.1 👍