Dynamic style inside styled about react-native-styled.macro HOT 2 CLOSED

Hey @vikrantnegi . Thanks for trying this out ✨

You are indeed right. Style declarations should be static because the babel macro will use the values to inject styles at compile time.

For your case (which I think is fairly common) you need to utilize the variants param. like this:

const CustomText = ({big)=> {
    return  <Text {...styled(['text-3xl', 'text-center', 'uppercase', 'big:text-6xl'], {big})}>Text</Text>
}

You would do the same if you want to implement e.g. a button with different styles:

const MyButton = ({primary, warning, ...rest}) => {
    return <Button {...styled([/* you default styles*/, 'primary:text-blue-900', 'warning:text-orange-900'], {primary, warning)}/>
}

You can literally pass any key as a variant. The library will apply that style if the value is Truthy.

Does that make sense?

from react-native-styled.macro.

@z0al Thank you for quick reply. That does make sense.

from react-native-styled.macro.