Use textVariants inside custom component based on selected variant

[TheoLAFARGE]

Hi guys !

I'm new to this lib (and also typescript). I'm struggling to use a variant on a child element based on the variant passed to my component.

Here is my button :

type RestyleProps = SpacingProps<Theme> & VariantProps<Theme, "buttonVariants">;

const restyleFunctions = composeRestyleFunctions<Theme, RestyleProps>([
  spacing,
  createVariant({ themeKey: "buttonVariants" }),
]);

type Props = RestyleProps & {
  label: string;
};

export const Button = ({ label, ...rest }: Props) => {
  const props = useRestyle(restyleFunctions, rest);
  return (
    <TouchableOpacity>
      <Box flexDirection="row" {...props}>
        <Text variant="body">{label}</Text>
      </Box>
    </TouchableOpacity>
  );
};

and my theme :

const theme = createTheme({
  ...
  buttonVariants: {
    defaults: {},
    primary: {
      backgroundColor: "primary",
    },
    secondary: {
      backgroundColor: "secondary",
    },
  },
});

In my Button component, I have a text with the variant body. But I don't want all my button to have this kind of text.

For my secondary button, i want a variant "header" for exemple. How can I do that ?

Is their a way from the theme to select the textVariants for a specific buttonVariants ?

For example :

const theme = createTheme({
  ...
  buttonVariants: {
    defaults: {},
    primary: {
      backgroundColor: "primary",
    },
    secondary: {
      backgroundColor: "secondary",
      textVariants: "header", // <-- note this new line 🤯
    },
  },
});

[zaxovaiko]

I haven't found any info about it, but I assume we can do something like this:

const labelVariant = rest.variant === 'primary' ? 'header' : 'body';

// and then
<Text variant={labelVariant}>{label}</Text>

Maybe this example PR will be useful