StyleSheet
Work with strict styles that provide deterministic rendering and automatically adapt to localized writing direction.
The StyleSheet abstraction converts predefined styles to (vendor-prefixed) CSS without requiring a compile-time step. Styles that cannot be resolved outside of the render loop (e.g., dynamic positioning) are usually applied as inline styles.
Did you know? StyleSheet automatically inserts and optimizes styles as “utility” CSS.
API #
Methods #
Define style objects. Each key of the object passed to create
must define a style object. These values are opaque and should not be introspected.
Combines two styles such that the last style overrides properties of the first style. If either style is falsy, the other one is returned without allocating an array, saving allocations and maintaining reference equality.
Details #
Create styles
const styles = StyleSheet.create({
container: {
borderRadius: 4,
borderWidth: 0.5,
borderColor: '#d6d7da',
},
text: {
fontSize: 19,
fontWeight: 'bold',
}
})
Styles are then applied to React GUI elements using the style
prop.
<View style={styles.container}>
<Text style={styles.text}>{props.text}</Text>
</View>
Composed
StyleSheet.compose(style1, style2);
StyleSheet.flatten(style) #
Lookup a style object by ID or flatten an array of styles into a single style object.
StyleSheet.flatten(styles.listItem);
StyleSheet.flatten([styles.listItem, styles.selectedListItem]);
Extensions to CSS #
pointerEvents -> box-only
, box-none
.
lineClamp.
animationKeyframes