[ BUG ] icon color defaulting to blue if using cn helper with conditional

[trevorpfiz]

Describe the bug this works:

<RefreshCw
            className="text-foreground"
            size={24}
          />

this breaks the text-foreground:

<RefreshCw
            className={cn("text-foreground", isSyncPending && "animate-spin")}
            size={24}
          />

To Reproduce Steps to reproduce the behavior:

1. Use an iconWithClassName with a conditional
2. See error

Expected behavior I would expect the text-foreground to be applied and styles not to break when using a conditional.

Platform (please complete the following information):

• Type: iPhone 14 Pro Max
• OS: iOS

Additional context I can work on a repro soon. Thanks!

[mrzachnugent]

@trevorpfiz From a quick look, I think the "animate-spin" class might be the issue. In the iconWithClassName function, only color and opacity are cssInteroped.

What if you tried:

<View className={cn(isSyncPending && "animate-spin")}
  <RefreshCw className={cn("text-foreground")} size={24} />
</View>

Or update the iconWithClassName to accept animate-spin (I'm not sure how to do that)?

[trevorpfiz]

@trevorpfiz From a quick look, I think the "animate-spin" class might be the issue. In the iconWithClassName function, only color and opacity are cssInteroped.

What if you tried:

<View className={cn(isSyncPending && "animate-spin")}
  <RefreshCw className={cn("text-foreground")} size={24} />
</View>

Or update the iconWithClassName to accept animate-spin (I'm not sure how to do that)?

wrapping in a View works, thanks!

[trevorpfiz]

actually, this is not working on "nativewind": "4.1.6". animate-spin is not working in a Button? not sure what allowed it to work before.

Error: Couldn't find a navigation context. Have you wrapped your app with 'NavigationContainer'? See https://reactnavigation.org/docs/getting-started for setup instructions.

This error is located at:
    in CssInterop.View (created by HomeHeader)

[mrzachnugent]

@trevorpfiz To my knowledge, the newest version of NativeWind is 4.1.10. Can you try that?

[trevorpfiz]

@trevorpfiz To my knowledge, the newest version of NativeWind is 4.1.10. Can you try that?

It gives the same error. You can see in this repro: https://github.com/trevorpfiz/starter-base-repro