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

Properties

tokenize(
  component: React.Component,
  tokenObj: object
): React.Component;

There are times when a component accepts a prop that could potentially map to an Abyss token.

For example, the React Native SVG Circle component has a fill prop that accepts a color. We can use the tokenize function to allow the fill prop to now accept an Abyss color token.

const TokenizedCircle = tokenize(Circle, { fill: 'colors' });

The default values that can be used for a prop are 'colors', 'space', 'fontSizes', 'lineHeights', 'fontWeights', 'fonts' & 'radii'.

The tokens that exist for each value are defined in the ThemeProvider.

Basic Example

The TouchableHighlight component has a prop, underlayColor that accepts a color. Since we have tokens for colors, we can use the tokenize function to map the prop to accept tokens.

const TokenizedTouchableHighlight = tokenize(TouchableHighlight, {
  underlayColor: 'colors',
});

Now we can use a color token as a value for the underlayColor prop. Press the button below to see the underlay color.

Advanced Example

If the prop that should accept tokens is an object, the token object can be mapped to an object.

For example, the style prop on a View accepts an object with many props that can be mapped to tokens.

const TokenizedView = tokenize(View, {
  style: {
    backgroundColor: 'colors',
    borderColor: 'colors',
    marginLeft: 'space',
    borderRadius: 'radii',
  },
});

Now, those four props can now accept tokens.