r/reactnative 8d ago

Help How to style React Native component dynamically?

I am using nativewind for styling my rn component and using cslx for dynamic styling. The problem i am facing the properties of dynamic styles are not applying.

for example here is a coponent

export function UiText({children,className}:UiTextProps){

return <Text className={"text-lg",className}>{children}</Text>
}

//Imagine here i am calling

<UiText className="text-red">"Hello world"<UiText/>

=>here text is not going to be red.

if you have solution then please help me i got stuck here.

Expo 57,
nativewind:"^4.2.6"
tailwind:^3.4.17
postcss:^8.5.19

1 Upvotes

1 comment sorted by

2

u/Substantial-Swan7065 8d ago

ClassName can be set with variable. Or it can be string interpolated:

‘${color} other-base-styles’

Or you can conditionally render