[4.1.1] NativeWind classes not being applied on Animated.View

[vicary]

Description

^4.1.1 reintroduces #6665 while 4.1.0 does not.

Steps to reproduce

1. Render a component <Animated.View className="foo" style={{ display: "block" }} /> using [email protected]
2. Upgrade to react-native-reanimated@^4.1.1
3. Observe the lack of class foo, only a compiled CSS class from the style prop should be present.

Snack or a link to a repository

cannot install tailwindcss in snack

Reanimated version

^4.1.1

Worklets version

0.5.1

React Native version

Expo SDK 54

Platforms

Web

JavaScript runtime

Hermes

Workflow

None

Architecture

New Architecture (Fabric renderer)

Build type

Debug app & dev bundle

Device

No response

Host machine

macOS

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?

[vicary]

Apologies that I just don't care enough to make a minrep for the moment, pinning down to 4.1.0 as my fallback. :)

[manastunga787]

Facing the same issue <Animated.View className=" w-20 h-20 bg-pink-300 rounded-md mt-10"></Animated.View> does not work in web. Though version 4.1.0 works

[tjzel]

AFAIK in the new major version of NativeWind this won't be an issue. Falling back to the way the code was generated pre 4.1.1 is yielding more significant problems.

[bear-ei]

AFAIK in the new major version of NativeWind this won't be an issue. Falling back to the way the code was generated pre 4.1.1 is yielding more significant problems.

At least for now, it can be confirmed that this issue still exists in "nativewind": "^4.2.1".

[MohammedAbidNafi]

In Nativewind v5 5.0.0-preview.2 even after downgrading to "4.1.0" the issue is persisting for me

[tjzel]

@marklawlor Could you weigh in here?

[alterhuman]

This issue persists when using nativewind v5 even with reanimated 4.1.0. Did anyone find a version of reanimated that works?

[focux]

I can confirm that reanimated 4.1.0 works with nativewind 4

[ThomasBurgess2000]

I'm having the same issue with nativewind ^4.2.1 and reanimated 4.1.6. I can fix it on web by adding this before all my imports:

cssInterop(Animated.View, { className: 'style' });
cssInterop(Animated.Text, { className: 'style' });
cssInterop(Animated.Image, { className: 'style' });
cssInterop(Animated.ScrollView, { className: 'style' });

but it does not fix native iOS/Android Expo builds. Those continue to ignore those classes.

[ThomasBurgess2000]

Using inline styles instead of className obviously works for both native and web.