Menu
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 !!!
823
There are two main methods that React Native has for creating styles: inline styling and using a style prop to style subcomponents. Essentially, you have a StyleSheet. create method to define multiple styles at once, like an inline stylesheet in CSS.
React Native StyleSheet is a way of styling an application using JavaScript code, the main function of react native StyleSheet is concerned with styling and structuring of components in an application, all components of react native make use of a prop known as style, names and properties values work in a similar way as ...
Performance: Making a stylesheet from a style object makes it possible to refer to it by ID instead of creating a new style object every time. It also allows to send the style only once through the bridge.
Looking into the docs and reading a helpful article on Medium, it turns out React Native’s StyleSheet object gives us a few helpful methods to solve common styling needs: This causes the element to cover the entire screen, and sets the position property to “absolute”. A great example of when this is often useful is a modal overlay background.
If either style is falsy, the other one is returned without allocating an array, saving allocations and maintaining reference equality for PureComponent checks. Creates a StyleSheet style reference from the given object. Flattens an array of style objects, into one aggregated style object.
If you want, absoluteFill can be used to create a customized entry in a StyleSheet, e.g.: Sometimes you may want absoluteFill but with a couple tweaks - absoluteFillObject can be used to create a customized entry in a StyleSheet, e.g.: This is defined as the width of a thin line on the platform.
This method internally uses StyleSheetRegistry.getStyleByID (style) to resolve style objects represented by IDs. Thus, an array of style objects (instances of StyleSheet.create () ), are individually resolved to, their respective objects, merged as one and then returned. This also explains the alternative use.
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} />
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
