Style & StyleSheet
In React Native, StyleSheet is a core component that provides an abstraction layer similar to CSS stylesheets. It allows you to define styles in a more efficient and maintainable way by creating a single object that can be referenced throughout your application.
Key Terms
| Term | Description |
|---|---|
StyleSheet.create() | Creates an optimized style object. Validates styles at creation time and returns a frozen object. |
StyleSheet.compose() | Combines two styles into one. Useful for merging default and override styles. |
StyleSheet.flatten() | Flattens an array of style objects into a single object. Resolves conflicts by using the last style in the array. |
StyleSheet.hairlineWidth | The thinnest width that can be rendered on the current platform (typically 0.5px on iOS, 1px on Android). |
StyleSheet.absoluteFill | A predefined style for absolutely positioning an element to fill its parent ({position: 'absolute', left: 0, right: 0, top: 0, bottom: 0}). |
StyleSheet.absoluteFillObject | The raw object version of absoluteFill that can be extended. |