Class name doubles in component with style set to array

[denniske]

Describe the bug
I have a custom component Text2 which assigns classname and also sets the style to an array of styles. This leads to the classname having both the current and previous value in the html.

Reproduction

The component Text2 will behave wrong. The component Text3 will behave correctly.

import {Text as RNText} from 'react-native';

export const Text2: React.FC<any> = ({ className, children }) => {
    return <RNText className={className} style={[{ textAlign: 'center' }]}>{children}</RNText>;
};

export const Text3: React.FC<any> = ({ className, children }) => {
    return <RNText className={className} style={{ textAlign: 'center' }}>{children}</RNText>;
};

...

<Text2
    className={`${activeTab === index ? 'text-red-500' : 'text-yellow-500'}`}
>
    {tab}
</Text2>
<Text3
    className={`${activeTab === index ? 'text-red-500' : 'text-yellow-500'}`}
>
    {tab}
</Text3>

screenrec-nativewind-new.yafw.balanced.mp4

Repro: https://github.com/denniske/nativewind-textcomponent-repro

Expected behavior
Just have the current classname assigned to the html div.

"nativewind": "^4.2.1",
"react-native": "0.81.4",
"expo": "^54.0.0",

[danstepanov]

Thanks for all the info, if you're still running into this issue, I can try to take a look this week.