StyleSheet.md

StyleSheet

The StyleSheet abstraction converts predefined styles to (vendor-prefixed) CSS without requiring a compile-time step. Some styles cannot be resolved outside of the render loop and are applied as inline styles. Read more about how to style your application.

Methods

create(obj: {[key: string]: any})

Each key of the object passed to create must define a style object.

flatten: function

Flattens an array of styles into a single style object.

renderToString: function

Returns a string of the stylesheet for use in server-side rendering.

Properties

absoluteFill: number

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.

<View style={StyleSheet.absoluteFill} />

absoluteFillObject: object

Sometimes you may want absoluteFill but with a couple tweaks - absoluteFillObject can be used to create a customized entry in a StyleSheet, e.g.:

const styles = StyleSheet.create({
  wrapper: {
    ...StyleSheet.absoluteFillObject,
    backgroundColor: 'transparent',
    top: 10
  }
})

hairlineWidth: number

Example

<View style={styles.container}>
  <Text
    children={'Title text'}
    style={[
      styles.title,
      this.props.isActive && styles.activeTitle
    ]}
  />
</View>

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