import { Meta } from '@storybook/addon-docs/blocks';

<Meta title="APIs|StyleSheet" />

# StyleSheet

The StyleSheet abstraction converts predefined styles to (vendor-prefixed) CSS
without requiring a compile-time step. Styles that cannot be resolved outside of
the render loop (e.g., dynamic positioning) are usually applied as inline
styles.

## Methods

### compose(style1, style2)

Combines two styles such that the last style overrides properties of the first
style. If either style is falsy, the other one is returned without allocating an
array, saving allocations and maintaining reference equality.

```js
StyleSheet.compose(style1, style2);
```

### create(styles)

Each key of the object passed to `create` must define a style object. The
returned object replaces style objects with IDs.

```js
const styles = StyleSheet.create({
  container: {
    borderRadius: 4,
    borderWidth: 0.5,
    borderColor: '#d6d7da',
  },
  title: {
    fontSize: 19,
    fontWeight: 'bold',
  }
})
```

### flatten(style)

Lookup a style object by ID or flatten an array of styles into a single style
object.

```js
StyleSheet.flatten(styles.listItem);
StyleSheet.flatten([styles.listItem, styles.selectedListItem]);
```

## Properties

### absoluteFill

A very common pattern is to create overlays with position absolute and zero
positioning, so `absoluteFill` can be used for convenience and to reduce
duplication of these repeated styles.

```js
<View style={StyleSheet.absoluteFill} />
```

### absoluteFillObject

Sometimes you may want `absoluteFill` but with a couple tweaks -
`absoluteFillObject` can be used to create a customized entry in a `StyleSheet`

```js
const styles = StyleSheet.create({
  container: {
    ...StyleSheet.absoluteFillObject,
    backgroundColor: 'transparent',
    top: 10
  }
});
```

### hairlineWidth

Equal to 1px. This is not implemented using screen density as browsers may
round sub-pixel values down to `0`, causing the line not to be rendered.
