[v4]: Third party component does not apply styles, version 4.0.24 or later

[buildtheui]

Description:

Following the update to Nativewind version 4.0.24 or later, the previously functional capability to apply styles using the className property on lucide-react-native components no longer works, where className was used extensively for styling purposes on each icon. The current workaround involves using cssInterop for each icon, which involves manual changes across the project.

Steps to Reproduce:

1. Ensure the latest version of lucide-react-native is installed.
2. Upgrade Nativewind to version 4.0.24 or above.
3. Attempt to style a lucide-react-native icon using the className property, as demonstrated below:

import { CalendarCheck } from "lucide-react-native";

// Example usage demonstrating the issue
<CalendarCheck size={14} className="text-red-500 rotate-45" />

Observed Behavior:

Styles specified via the className property are not applied to the icons. The suggested workaround is to employ cssInterop as follows, which poses significant refactoring challenges:

import { CalendarCheck } from "lucide-react-native";

cssInterop(CalendarCheck, { className: "style" });

Expected Behavior:

The className property should work on components with the style prop

Environment Details:

React Native version: 0.73.4 Nativewind version: 4.0.24 and later lucide-react-native version: ^0.315.0 Operating System: iOS simulator Expo: 50.0.8

[binchik]

Having the same issue with https://github.com/duongdev/phosphor-react-native

My workaround looks like this but I won't benefit from tree-shaking:

import * as PhsophorIcons from 'phosphor-react-native'

Object.values(PhsophorIcons).forEach((pi) => {
    if (isReactComponent(pi)) {
      cssInterop(pi, {className: 'style'} as any)
    }
  })

[feledori]

@binchik Pretty good solution.. As metro doesn't tree shake this shouldn't impact anything.

[danstepanov]

We are closing all pre-v4.1 issues now that v4.1 is released. If the problem is still happening with the latest v4.1, please open a new issue and reference this one in the description.