React Native - What is the difference between StyleSheet.absoluteFill() and StyleSheet.absoluteFillObject()?

Question

The documentation provided an example for StyleSheet.absoluteFillObject() whose behavior is also same while using with StyleSheet.absoluteFill():

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

What is the difference between StyleSheet.absoluteFill() and StyleSheet.absoluteFillObject()? A little example will be more appreciated. Thanks !!!

Answer 1

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} />