import { useStyleSheet } from '@uhg-abyss/mobile';

The useStyleSheet hook helps to parse the additional functionality from the Abyss StyleSheet.

Usage

useStyleSheet(styles: object): object

Take a look at StyleSheet below:

const styles = StyleSheet.create({
  container: {
    padding: '$semantic.spacing.xs * 4px',
    margin: '$fontScale',
  },
  label: {
    color: '$semantic.color.text.body.paragraph',
    fontWeight: '$core.font-weight.bold',
    fontSize: '$core.font-size.p.100',
    marginVertical: '$semantic.spacing.lg * 2',
    fontFamily: '$heading',
  },
  box: {
    backgroundColor: '$semantic.color.surface.container.status.info.saturated',
    borderColor: '$semantic.color.border.status.saturated.error',
    borderRadius:
      '$semantic.border-radius.container.sticky * $core.border-radius.xs',
    borderWidth: 4,
    width: '6rem',
    height: '48px * 3',
    marginBottom: '32px - 0.75rem',
    '@media (min-width: 767px)': {
      width: '12rem',
    },
  },
});

There's a lot of code that is unfamiliar to the normal StyleSheet. Above, there are media queries, tokens, operations, rem values, and pixel values, which normally would not be able to be parsed by React Native core component. This is where the useStyleSheet hook comes in. By using the hook, we can parse these value into value that the core component can understand.