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 !!!

score 27 · Answer 1 · answered Dec 07 '18 at 22:54

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

The thing you mention in the answer for `StyleSheet.absoluteFillObject` can also be done with the `StyleSheet.absoluteFill`, so, what can be the difference? — Stack Overflow, Dec 08 '18 at 05:34
According to this answer https://stackoverflow.com/a/69968270/3484824 it makes a difference when using TypeScript as you can't spread `StyleSheet.absoluteFill` into a stylesheet, apparently — Can Rau, May 02 '22 at 22:28

score 15 · Answer 2 · edited Nov 23 '21 at 14:06

There is no difference between those two. You can see this in StyleSheet.js:

 /**
   * 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.
   */
  absoluteFill: (absoluteFill: any), // TODO: This should be updated after we fix downstream Flow sites.

  /**
   * 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,
   *       top: 10,
   *       backgroundColor: 'transparent',
   *     },
   *   });
   */
  absoluteFillObject: absoluteFill,

Yes, "Use the Source, Luke"! Here's the reference to check what is the situation in the latest version: https://github.com/facebook/react-native/blob/master/Libraries/StyleSheet/StyleSheet.js#L266 — iqqmuT, Jul 06 '20 at 12:46

score 6 · Answer 3 · answered Nov 15 '21 at 00:22

I may be late for the party. But there is some difference between absoluteFill and absoluteFillObject in typescript.

Mainly in typescript, the type of:

absoluteFill is RegisteredStyle<StyleSheet.AbsoluteFillStyle>
absoluteFillObject is StyleSheet.AbsoluteFillStyle

const styles = StyleSheet.create({
    container: {
        // must use "absoluteFillObject" in typescript
        ...StyleSheet.absoluteFillObject,
    }
})

For JavaScript, there is no difference.

score 4 · Answer 4 · answered May 16 '20 at 03:39

4

As of version 0.62, no difference at all according to the official document

In case you are using EXPO Snack like I do, the absoluteFill preview on web seems buggy at this time. On a real device, it should be fine.

answered May 16 '20 at 03:39

Bobby Chang Liu

321
2
5

score 3 · Answer 5 · edited May 19 '21 at 06:33

3

Currently, there is no difference between using absoluteFill vs. absoluteFillObject.

edited May 19 '21 at 06:33

Penny Liu

15,447
5
79
98

answered Oct 29 '20 at 19:57

agnes_st

57
3

score 2 · Answer 6 · edited Dec 18 '21 at 16:33

2

Currently (React Native 0.66), the documentation states:

there is no difference between using absoluteFill vs. absoluteFillObject.

edited Dec 18 '21 at 16:33

Henry Ecker

34,399
18
41
57

answered Nov 19 '21 at 09:46

Prakash Bokati

191
1
11

score 1 · Answer 7 · answered Apr 22 '21 at 11:07

I've tried to print the value of absoluteFill and absoluteFillObject.
They're no difference. They're the same value.

[LOG] absoluteFill: {"bottom": 0, "left": 0, "position": "absolute", "right": 0, "top": 0}
[LOG] absoluteFillObject: {"bottom": 0, "left": 0, "position": "absolute", "right": 0, "top": 0}

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

7 Answers7