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 😉

[superandrew213]

@flexbox what's the best way to handle this for example?

boxVariants: {
    absoluteFill: StyleSheet.absoluteFillObject,
    centeredContent: {
      alignItems: 'center',
      justifyContent: 'center',
    },
    active: {
      borderWidth: 2,
      borderColor: 'activeBorder',
      borderRadius: 'm',
    },
    elevated: {
      shadowColor: 'primaryShadow',
      shadowOffset: { width: 0, height: 2 },
      shadowOpacity: 0.25,
      shadowRadius: 3.84,
      elevation: 5,
    },
  }

<Box variant={['absoluteFill', 'elevated', 'centeredContent', 'active']} />

[VictorPulzz]

I agree with @superandrew213 . I modified a little restyle in my projects so that it can accept an array in variants.
It's really more convenient than constantly writing a new version. It looks like a modifier in plain css.
@flexbox
I can make a pull request with the changes, can you take a look?

<Text variant={['body3', 'medium', 'uppercase']} textAlign="center" color="white" opacity={0.8}>
  test
</Text>

textVariants:

export const textVariants = {
  body3: {
    fontFamily: 'Raleway-Medium',
    fontWeight: '600',
    fontSize: 14,
    lineHeight: 18,
  },
  medium: {
    fontWeight: '500',
  },
  regular: {
    fontWeight: '400',
    fontFamily: 'Raleway-Regular',
  },
  uppercase: {
    textTransform: 'uppercase',
  },
};

[lucas-garrido]

I like the way fast-styles manage the variants :
https://fedemartinm.github.io/fast-styles/docs/basics/variants