react-native Image w and h properties overwritten on web if using local image

[Miyou]

Describe the bug

When importing Image from react-native, setting source to a local image e.g. source={require('assets/icon.png')} and setting e.g. h-20 and w-20 and rendering on web, the classes are correctly applied, but are overridden by the actual height and width of the image.

This does not seem to happen if setting source to an uri, and does not happen when rendering on iOS.

Reproduction
Stackblitz: https://stackblitz.com/edit/vitejs-vite-845c398o?file=my-expo-app%2Fapp%2Findex.tsx
Stackblitz render: https://76coth4vzab5pas.boltexpo.dev/

Expected behavior

The image should use the specified width from classNames, and not be overridden by actual image size.

Additional context

See dev tools:

[MrPiao]

I noticed this too, but I don't think this is a NativeWind bug/issue per se and more a quirk of the native image component. In CSS inline styles would be the highest "specificity" which means it would override any other styles applied by TW / NativeWind.

Have you tried using the !important hack by using !w-20? I realize I'm not even sure if this works on native.. but would work in vanilla TW.

[Miyou]

I noticed this too, but I don't think this is a NativeWind bug/issue per se and more a quirk of the native image component. In CSS inline styles would be the highest "specificity" which means it would override any other styles applied by TW / NativeWind.

Have you tried using the !important hack by using !w-20? I realize I'm not even sure if this works on native.. but would work in vanilla TW.

Thanks! Using the exclamation mark does work. Would be ideal not to need this though.

[MrPiao]

Great! If you're trying this on web though, I would see if it works as expected on native as well.
I would not be surprised if the ! wasn't implemented on native, as that hack is quite CSS specific. The docs seem to suggest that this is implemented cross-platform on NativeWind.

[danstepanov]

This is expected behavior. React Native's Image component applies inline width/height from the source, which takes precedence over className styles. Use the ! important modifier (e.g. !w-full) to override inline styles.