createText component ignores default styles when no variant used

[jackbot]

I've hunted around in the issues but I can't seem to figure out if I'm missing something obvious here.

It seems like the component created with createText will only use the defaults from the theme if a variant prop is used.

import React from "react";
import { View } from "react-native";
import { createTheme, ThemeProvider } from "@shopify/restyle";
import { createText } from "@shopify/restyle";

const palette = {
  purple: "#8C6FF7",
};

const theme = createTheme({
  colors: {
    textPurple: palette.purple,
  },
  spacing: {
    s: 8,
  },
  breakpoints: {},
  textVariants: {
    defaults: {
      color: "textPurple",
    },
    h1: {
      fontSize: 30,
    },
  },
});

type Theme = typeof theme;
const Text = createText<Theme>();

export default function App() {
  return (
    <ThemeProvider theme={theme}>
      <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
        <Text>I would expect this text to be purple, but it's black</Text>
        <Text variant="h1">
          This text is purple and font size 30 as expected
        </Text>
      </View>
    </ThemeProvider>
  );
}

Am I missing something here?

[sbalay]

Fixed by #148 in v2.1.0

[RageOfJustice]

Hello. The fix is not correct. Now If I dont specify variant (which not necessary according to TS definition, see the screenshot)

It throws 2 different errors:

1. when no textVariants specified:

2. when `textVariants` specified but `variant` prop not used for the `Text` component:

So, my suggestion is either set variant as required prop in the component or just do not add variant prop when it's not set.

Or 3d option: document that issue in text section. I have wasted 1h trying to solve the problem with digging into the source.

So @sbalay pls reopen the issue

[ghost]

Please reopen the issue