0.77: Animated make some views disappearing (Android)

[fbp93]

Description

Hi!
My app use Animated to show a toast message on top of different screens. After updating my app to 0.77.x, every time the toast disappears, also the other views below disappears, breaking my app.
I have been able to reproduce a similar case with the reproducer. The same example is working fine with 0.76.x.
I also saw that in 0.77.x many changes have been made to Animated so it's clearly that something is broken due to those changes.
Can you please have a look? It's preventing me to update the app 🙏 Thanks!

Steps to reproduce

1. Run the reproducer app on Android
2. Click the button
3. See that a toast message appears, but when it disappears after a few seconds, also the red view disappears.

FYI It seems that if I don't set a background color to the main view the bug doesn't happen.

React Native Version

0.77.1

Affected Platforms

Runtime - Android

Output of npx @react-native-community/cli info

System:
  OS: macOS 14.6.1
  CPU: (10) arm64 Apple M1 Pro
  Memory: 217.08 MB / 32.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 20.17.0
    path: ~/Library/Caches/fnm_multishells/17568_1737708357111/bin/node
  Yarn:
    version: 1.22.1
    path: ~/Library/Caches/fnm_multishells/17568_1737708357111/bin/yarn
  npm:
    version: 10.8.2
    path: ~/Library/Caches/fnm_multishells/17568_1737708357111/bin/npm
  Watchman:
    version: 2024.11.18.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.16.2
    path: /Users/work/.rbenv/shims/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 24.0
      - iOS 18.0
      - macOS 15.0
      - tvOS 18.0
      - visionOS 2.0
      - watchOS 11.0
  Android SDK:
    API Levels:
      - "23"
      - "28"
      - "29"
      - "30"
      - "31"
      - "33"
      - "34"
      - "35"
    Build Tools:
      - 30.0.3
      - 31.0.0
      - 33.0.0
      - 33.0.1
      - 34.0.0
      - 35.0.0
    System Images:
      - android-28 | Google ARM64-V8a Play ARM 64 v8a
      - android-34 | Google APIs ARM 64 v8a
      - android-34 | Google Play ARM 64 v8a
    Android NDK: 25.1.8937393
IDEs:
  Android Studio: 2024.2 AI-242.23726.103.2422.12816248
  Xcode:
    version: 16.0/16A242
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.13
    path: /opt/homebrew/Cellar/openjdk@17/17.0.13/bin/javac
  Ruby:
    version: 3.0.0
    path: /Users/work/.rbenv/shims/ruby
npmPackages:
  "@react-native-community/cli":
    installed: 15.0.1
    wanted: 15.0.1
  react:
    installed: 18.3.1
    wanted: 18.3.1
  react-native:
    installed: 0.77.1
    wanted: 0.77.1
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: false
iOS:
  hermesEnabled: Not found
  newArchEnabled: true

Stacktrace or Logs

no logs to show

Reproducer

https://github.com/fbp93/rn77-animated-issue

Screenshots and Videos

No response

[cipolleschi]

Hi @fbp93! Just to make sure, you are still runing the Old Architecture, right?

[fbp93]

@cipolleschi yes! Sorry i forgot to mention it

[oraylan]

I am also having this same problem with Animated, in 0.78 with the old architecture. In the new architecture I don't see this problem. But unfortunately I can't move up to the new architecture at this time :(

[cipolleschi]

@fbp93 I can run the reproducer because you are rehosting some of the packages in RN from the internal infra:

error An unexpected error occurred: "https://bendingspoons.jfrog.io/bendingspoons/api/npm/npm/@react-native/assets-registry/-/assets-registry-0.77.1.tgz: Request failed \"401 Unauthorized\"".

[fbp93]

@fbp93 I can run the reproducer because you are rehosting some of the packages in RN from the internal infra:

error An unexpected error occurred: "https://bendingspoons.jfrog.io/bendingspoons/api/npm/npm/@react-native/assets-registry/-/assets-registry-0.77.1.tgz: Request failed \"401 Unauthorized\"".

@cipolleschi fixed 🙏 anyway in these cases if you remove the yarn.lock and and run yarn you should be able to fix it

[cipolleschi]

Thanks! I managed to reproduce the issue and I verified that it repros also on main.
I'm not super familiar with that part of the codebase, so I reached out to other people internally that might know more about it.

[rozele]

Here's a more minimal repro:

function App() {
  const [show, setShow] = React.useState(false);

  const view = show ? (
    <View
      style={[
        // eslint-disable-next-line react-native/no-inline-styles
        {
          zIndex: 1,
          alignSelf: 'center',
        },
      ]}>
      <Text>Test</Text>
    </View>
  ) : null;

  return (
    <>
      {view}
      <Text onPress={() => setShow(!show)}>
        Click this text
      </Text>
      <View
        style={{
          height: 50,
          width: 50,
          backgroundColor: 'blue',
        }}
      />
    </>
  );
}

The issue seems to be that when you remove a sibling with zIndex, the next immediate sibling fails to paint properly (when there are at least two additional siblings after the removed sibling)

[zelgan90]

Having pretty much the same issue as @fbp93 on RN 0.78.0 Android old arch. I applied the changes from @rozele's PR and still seeing the issue on Android, when using a custom animated toast component with a zIndex property, as soon as it goes away the next child disappears.

[cipolleschi]

@zelgan90 Are you sure you were building from source? React Native for android is shipped with prebuilds. That means that, even if you update the code in node_modules, the change won't be applied to your app.
To build from source, you have to follow these steps.

[zelgan90]

@zelgan90 Are you sure you were building from source? React Native for android is shipped with prebuilds. That means that, even if you update the code in node_modules, the change won't be applied to your app. To build from source, you have to follow these steps.

@cipolleschi You're absolutely right, didn't even know this was a thing. Just built from source using the link you shared with the changes from the PR and the fix worked, thanks.

The thing is build took almost 20 mins and as the docs mention, it's not recommended as a long term fix. Is there any other solution aside from waiting for this fix to be published?