Variant does not work when I pass style prop.

[shubhamdeol]

Description

If I am using style and type prop which updates the variant of component. Both does not work well together.

Steps to reproduce

I have a text component as below

interface Props extends TextProps, UnistylesVariants<typeof stylesheet> {}

const Text: React.FC<Props> = ({ children, type, ...other }) => {
  const { styles } = useStyles(stylesheet, {
    type,
  });

  return (
    <RnText style={styles.text} {...other}>
      {children}
    </RnText>
  );

const stylesheet = createStyleSheet((theme) => ({
  text: {
    variants: {
      type: {
        headline_large: {
          fontSize: 32,
          lineHeight: 40,
          fontFamily: "Montserrat-Regular",
        },
        },
        },
        })

    When using this component 

        export default function Index() {
  const { styles } = useStyles(stylesheet);
  return (
    <View style={styles.container}>
      <Text type="headline_medium" style={styles.headline}>
        So you Have, Good News?
      </Text>
    </View>
  );
}

const stylesheet = createStyleSheet((theme) => ({
  container: {
    flex: 1,
    backgroundColor: theme.colors.surface,
    paddingTop: UnistylesRuntime.insets.top,
    paddingHorizontal: theme.margins.xl,
  },
  headline: {
    color: theme.colors.onSurface,
    marginTop: theme.margins.xl,
  },
}));

if I remove the style prob it works with type="headline_medium" but if I pass the style prob it does not update style as per the given variant.

Snack or a link to a repository (optional)

No response

Unistyles version

2.8.3

React Native version

0.74.3

Platforms

iOS

Engine

Hermes

Architecture

Paper (old)

[shubhamdeol]

sorry, my bad. Issue was in my text component.

passing styles like below fixed the issue

<RnText style={[styles.text, style]} {...other}>
      {children}
    </RnText>