Multiple stylesheets in a component

[sftechswdev]

For typography, I have a defined global stylesheet and a local stylesheet for each component. As shown in the example below, I must utilise both stylesheets in one of the component. I've observed that when the theme is changed, the component would render twice. Is there a different way to use two stylesheets?

function TestComponent(): JSX.Element {
  const {styles: globalStyles} = useStyles(globalStyleSheet);
  const {styles: componentStyles} = useStyles(componentStyleSheet);

  return (
    <View>
      <Text style={globalStyles.text}>Global style</Text>
      <Text style={componentStyles.text}>Component style</Text>
    </View>
  );
}

const componentStyleSheet = createStyleSheet(theme => ({
  text: {
    fontSize: 14,
    color: theme.colors.text,
  },
}));

const globalStyleSheet = createStyleSheet(theme => ({
  appContainer: {
    flex: 1,
    backgroundColor: theme.colors.background,
  },
  text: {
    fontSize: 20,
    color: theme.colors.text,
  },
}));

[jpudysz]

This is an antipattern: each useStyles hook will cause a re-render, which is the reason for the double re-render.

You don't need a globalStyleSheet. You can:

1. Use variants and create a BaseText component that accepts these variants and renders different styles: https://www.unistyl.es/reference/variants/
2. Move your globalStyleSheet to the theme and simply spread (...) the globalStyleSheet into your componentStyleSheet.

I would recommend using variants.

[sftechswdev]

Thank you.