Corrupted styles with third-party component using cssInterop and shadows
Author: jkondelaCreated Feb 19, 2025Updated Jul 8, 2026
Labelshelp wantedneeds reproduction
Hey,
when using cssInterop/remapProps for third party component with multiple style props and using shadow-{n} size, it won't pass correct styles to style/className prop.
Reproduction
Created via npx create-expo-stack@latest --nativewind
https://github.com/jkondela/nativewind-shadow-repro
Current behaviour
Passing shadow-{n} to containerClassname:
<StyledThirdPartyComponent
className="bg-blue-500 p-4"
containerClassname="border border-grey-200 bg-white shadow-lg shadow-grey-300"
/>className prop receives weird value:
{"shadowOffset": {"height": 4, "width": 0}}Expected
className should receive same value as when no shadow is used:
{"backgroundColor": "#3b82f6", "padding": 14}Source: nativewind/nativewind