nativewind icon indicating copy to clipboard operation
nativewind copied to clipboard

[v4] Merging style and className when using cssInterop not working

Open focux opened this issue 1 year ago • 0 comments

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",
});

focux avatar Jun 28 '24 19:06 focux