Class name doubles in component with style set to array

Author: denniskeCreated Sep 18, 2025Updated Sep 14, 2026

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.

bash

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>

https://github.com/user-attachments/assets/fc16e25f-a05f-48e8-a90d-d9cebad2fc56

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",

Source: nativewind/nativewind

View original on GitHub View discussion on GitHub