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 #

create { [key]: ruleset }

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.

compose ...styles

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

Updated
Edit
React GUICopyright © Facebook Inc.