react-native/website/versioned_docs/0.23/stylesheet.md

id, title, original_id

id	title	original_id
version-0.23-stylesheet	stylesheet	stylesheet

StyleSheet #

Edit on GitHub

A StyleSheet is an abstraction similar to CSS StyleSheets

Create a new StyleSheet:

var styles = StyleSheet.create({ container: { borderRadius: 4, borderWidth: 0.5, borderColor: '#d6d7da', }, title: { fontSize: 19, fontWeight: 'bold', }, activeTitle: { color: 'red', }, });

Use a StyleSheet:

<View style={styles.container}> <Text style={[styles.title, this.props.isActive && styles.activeTitle]} /> </View>

Code quality:

• By moving styles away from the render function, you're making the code easier to understand.
• Naming the styles is a good way to add meaning to the low level components in the render function.

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. All subsequent uses are going to refer an id (not implemented yet).

Methods #

static create(obj: {[key: string]: any}) #

Creates a StyleSheet style reference from the given object.

Properties #

hairlineWidth: CallExpression #

This is defined as the width of a thin line on the platform. It can be used as the thickness of a border or division between two elements. Example:

{ borderBottomColor: '#bbb', borderBottomWidth: StyleSheet.hairlineWidth }

This constant will always be a round number of pixels (so a line defined by it look crisp) and will try to match the standard width of a thin line on the underlying platform. However, you should not rely on it being a constant size, because on different platforms and screen densities its value may be calculated differently.

flatten: CallExpression #

Next →