Add multiline for variant.

[VictorPulzz]

It would be cool if you could order several textVariants
<Text variant={['h1', 'bold']} >....

[fabcall]

This one seems a pretty good request. A good use case would be for buttons, where one could have, for instance, a base class (e.g., 'button'), a "compact" prop and the variant itself (e.g., ["button", "primaryFilled", "compact"].

[flexbox]

Hey @VictorPullzz

For your Text use-case I think you could use something like

<Text variant="h1" textAlign="center" color="textOnDark" mb="xxl" fontWeight="500">
  My title text
</Text>

If your problem is solved can you close the issue or provide another example because maybe I am missing something? 😉

[VictorPulzz]

Hey @flexbox :)
I mean modifications, let's say I need h1 to be underlined or not. I don't want to use and copy the same styles, it would be nice if you could combine variants.

[flexbox]

✅

<Text variant="h1" textDecorationLine="underline">My title text</Text>

Can you try again and find another good example? 😄

---

—I understand your point but from my perspective restyle follows the same guidelines as tailwindcss.
In this paradigm, multiline variants are just props declarations

[VictorPulzz]

@flexbox
haha, I understand how to make an underline, I just took the simplest example, there can be many styles. I'm sure that you worked with a pure css and you know what modifiers are, btn btn__border etts. I mean this. Tailwindcss this is cool, but when you have a bunch of styles you get a depletion of properties, which is pretty inconvenient IMHO...

[fregayeg]

Hello!

React Native provides a way to use multiple style references like :

<Text style={[styles.main, styles.labeled]} />

I'd appreciate to find such with restyle library like:

<Text variants={["main", "labeled"]} />

[flexbox]

Hey @fregayeg
I think that's the whole point of not supporting this type of feature with restyle and avoiding unexpected side effects.

Example:
We want to avoid the spread of hell explained on this video

Another way to handle this is to create a specific style like with variant text in react-native-paper

    <Text variant="displayLarge">Display Large</Text>
    <Text variant="displayMedium">Display Medium</Text>
    <Text variant="displaySmall">Display small</Text>

    <Text variant="headlineLarge">Headline Large</Text>
    <Text variant="headlineMedium">Headline Medium</Text>
    <Text variant="headlineSmall">Headline Small</Text>

    <Text variant="titleLarge">Title Large</Text>
    <Text variant="titleMedium">Title Medium</Text>
    <Text variant="titleSmall">Title Small</Text>

    <Text variant="bodyLarge">Body Large</Text>
    <Text variant="bodyMedium">Body Medium</Text>
    <Text variant="bodySmall">Body Small</Text>

as @VictorPulzz tried to convince me, I am happy to have a more detailed example to change my mind 😉