Luicide-react-native icon styling using className not working on native devices

[rajat946]

Describe the bug I tried to use nativewind on my expo project, and I am using luicide-react-native icons I want to style it using className but it is not working on native devices. Please fix this on priority as I am using it in my project. I have also seen the issues regarding icon but none of them solved my problem https://github.com/expo/vector-icons/issues/277 https://github.com/marklawlor/nativewind/issues/614

sharig below the github repo for reference - https://github.com/rajat693/nw-expo

To Reproduce Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior A clear and concise description of what you expected to happen.

Expo Snack If applicable, add a link to an Expo snack demonstrating the issue. There are multiple example snacks available at nativewind.dev.

Screenshots If applicable, add screenshots to help explain your problem.

Additional context Add any other context about the problem here.

[mz-evia]

@rajat946 First of all, this is an open source library by volunteers, so please do not demand a priority for your problem unless you are sponsoring the author. To do so please visit https://github.com/sponsors/marklawlor

Probably this is related to a problem that Lucide components are not using the className prop automatically. Could you try to add a compatibility layer like this (in a Icons.tsx file for example)

import { AlertCircle, CheckCircle, LucideIcon, XCircle } from 'lucide-react-native';
import { cssInterop } from 'nativewind';

function interopIcon(icon: LucideIcon) {
  cssInterop(icon, {
    className: {
      target: 'style',
      nativeStyleToProp: {
        color: true,
        opacity: true,
      },
    },
  });
}

interopIcon(AlertCircle);
interopIcon(CheckCircle);
interopIcon(XCircle);

export { AlertCircle, CheckCircle, XCircle };

Maybe you can add a comment if this fixes your problem. Thanks!

[feledori]

First of, the tone of this issue is not good. "Please fix this on priority as I am using it in my project." is a reason not to do it as this is an oss project. You should be grateful to be able to use it for free and not be demanding on the maintainer. Second of use the cssInterop to define the Icon interop.

[rajat946]

I apologize for the tone I used earlier; it wasn't my intention. I attempted the approach suggested above, but unfortunately, it didn't solve my problem. Nonetheless, I'll continue to explore other solutions. Thank you for your assistance.