[V5] - styled doesn't work as it worked in V4

[albertcito]

Describe the bug

In V4, the icon displays the size and color based on size-[size] and text-[color] className. In V5, it doesn't work.

Reproduction

• This is the V4 code and this is the V4 Icon component

cssInterop(IconStyled, {
  className: {
    target: "style",
    nativeStyleToProp: {
      height: "size",
      width: "size",
    },
  },
});

• This is the V5 code and this is V5 Icon component

styled(IconStyled, {
  className: {
    target: "style",
    nativeStyleToProp: {
      height: "size",
      width: "size",
    },
  },
});

How can I make it work?

[albertcito]

I make it work. But the stroke color is not working.

function IconStyled({ icon, ...props }: IconProps) {
  const Icon = icons[icon];
  const Styled = styled(Icon, {
    className: {
      target: "style",
      nativeStyleToProp: {
        height: "size",
        width: "size",
      },
    },
  });
  return <Styled {...props} />;
}

[jontroncoso]

@albertcito I found that color-<color> works with the styled() function. However when I use it, the size stops working. When I copy/paste your example I get this error:

I used typeahead to figure this out but, not only does it not work, but it also breaks the colors:

export const MapPin = styled(iMapPin, {
  className: {
    target: 'style',
    nativeStyleMapping: {
      height: 'size',
      width: 'size',
    },
  },
});

Interestingly, If I DON'T use the second parameter I am able to get the color working (and tested) in iOS/web using:

export const MapPin = styled(iMapPin);

return  <MapPin size={12} className='color-foreground'  />

BUT size only works in iOS (does nothing in web).

[rgcjhn]

Hi, you can copy this

import { LucideIcon, LucideProps } from 'lucide-react-native';
import { styled } from 'nativewind';
import React from 'react';

type StyledIconProps = {
  icon: LucideIcon;
  className?: string;
} & LucideProps;

export default function StyledIcon({
  icon,
  className,
  ...otherProps
}: StyledIconProps) {
  const Styled = styled(icon, {
    className: {
      target: 'style',
      nativeStyleMapping: {
        color: 'color',
        height: 'size',
        width: 'size',
        tint: 'fill',
        stroke: 'stroke',
      },
    },
  });

  return <Styled {...otherProps} className={className} />;
}

Usage example:

import { Home } from 'lucide-react-native';
import StyledIcon from './StyledIcon';

export default function Example() {
  return (
    <StyledIcon
      icon={Home}
      className="text-red-500 fill-red-500 h-[24px]"
    />
  );
}

[jontroncoso]

It does not work for me. I copy/pasted your StyledIcon() function, unaltered. I tried a variety of ways to see how they work:

                <Building2 size={24} color={'#FF0'} />
                <Building2 size={12} color={'#F0F'} />
                <Text className="color-foreground text-xs">1|2</Text>

                <Building2 size={24} color={'var(--color-primary)'} />
                <Building2 size={12} color={'var(--color-secondary)'} />
                <Text className="color-foreground text-xs">2|3</Text>

                {/* const StyledBuilding2 = styled(iBuilding2); */}
                <StyledBuilding2 size={24} className="color-primary" />
                <StyledBuilding2 size={12} className="color-secondary" />
                <Text className="color-foreground text-xs">3|4</Text>

                {/* This is using your way: */}
                <StyledIcon icon={Building2} className="color-primary" size={24} />
                <StyledIcon icon={Building2} className="color-secondary" size={12} />
                <Text className="color-foreground text-xs">4|5</Text>

                <StyledIcon icon={Building2} className="text-primary h-[24]" />
                <StyledIcon icon={Building2} className="text-secondary h-[12]" />

And here's what that looks like (iOS on the left, web on the right):

As you can see the only way to get it to render consistently across all devices is to NOT use styled() at all and manually type in the hex code into the color field. This renders the tailwind themes useless, but I am going to have to do that for the time being. Hopefully this will be resolved sometime in the future, but hey that's to be expected when you work with betas. No biggie.

[danstepanov]

The original question was resolved in the comments — working styled() configuration with nativeStyleMapping was posted. Closing as resolved.

[mo-fouad]

Have you tried this fix with Expo 56?