nativewind
nativewind copied to clipboard
[v4] Merging style and className when using cssInterop not working
When using cssInterop, and you pass the component a style and className, I would expect the styles to be merged but looks like it's not the case. My use case it's passing both style and className to ExpoImage. I'm computing the images size dynamically so I can't use a className for the size but I do want to keep using tailwind for other properties.
My work-around is to only allow a style or className to be passed down to the component:
const ImageComponent = ({
style,
$style,
...props
}: ImageProps & { $style?: StyleProp<ImageStyle> }) => {
// TODO - i'm still not sure how to merge these styles
if (style && $style) throw new Error("Pass either a className or style prop, not both");
return <ExpoImage style={[style, $style]} {...props} />;
};
export const Image = cssInterop(ImageComponent, {
className: "$style",
});