useStyleSheet

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 components. This is where the useStyleSheet hook comes in. By using the hook, we can parse these values into values that the core components can understand.

Usage​

Usage