React Native StyleSheet Helpers

React Native has a few helpers on the StyleSheet object that are really useful.

absoluteFill

absoluteFill is an easy way to set a view to be full screen and absolute positioned. It’s a short cut for:

{
  position: 'absolute',
  top: 0,
  left: 0,
  bottom: 0,
  right: 0
}

Use it to extend your other styles like this:

const styles = StyleSheet.create({
  container: {
    backgroundColor: 'red'
  }
});
<View style={[StyleSheet.absoluteFill, styles.container]} />

absoluteFillObject

Say you want to absolute position your view, but bump it down 20px to offset for the status bar (for example).

You can spread StyleSheet.absoluteFillObject into your style and then override one of it’s values.

const styles = StyleSheet.create({
  container: {
    ...StyleSheet.absoluteFillObject,
    top: 20,
    backgroundColor: 'red'
  }
});
<View style={styles.container} />

hairlineWidth

There’s also a helper for making thin lines. For example, on an iOS device with a 2x Retina display, it will make a 0.5px line. But on a 1x display, it will be 1px.

const styles = StyleSheet.create({
  container: {
    borderBottomColor: '#bbb',
    borderBottomWidth: StyleSheet.hairlineWidth
  }
});
<View style={styles.container} />