useAnimatedStyle breaks react-native-elements Dialog component

[alterx]

Description

I'm currently using react-native 0.76 and Expo SDK 52, react-native-reanimated and react-native-elements.

The corresponding versions are:

    "react-native-reanimated": "~3.16.1",
    "@rneui/base": "^4.0.0-rc.8",
    "@rneui/themed": "^4.0.0-rc.8",
    "react-native-safe-area-context": "4.12.0"

For some reason, when a component that uses useAnimatedStyle is present, the react-native-elements Dialog component breaks, becomes non-interactive and doesn't display properly. Removing the useAnimatedStyle immediately restores all the functionality. I see no errors in console.

I've indicated that the app is Expo managed and I use a dev build. But I've also been able to replicate this in expo Go. It also happens in both release and debug apps.

Steps to reproduce

1. In the provided Snack click the SHOW button.
2. A red dialog with text in blue should appear.
3. Touch any part of the red overlay.
4. The dialog should disappear.
5. Uncomment the provided <Switch /> component in line 43.
6. Click the SHOW button again.
7. The dialog doesn't appear
8. You can't close or interact in any way with the app

Snack or a link to a repository

https://snack.expo.dev/@cvega/blissful-yellow-scones

Reanimated version

3.16.1

React Native version

0.76

Platforms

Android

JavaScript runtime

None

Workflow

Expo Dev Client

Architecture

Fabric (New Architecture)

Build type

Other (please specify)

Device

Real device

Device model

Pixel 7A

Acknowledgements

Yes

[alterx]

This one might be related to the initial report in this issue but it seems like the fix has already been merged and I still see the issue