React NativeStyleSheet # | 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.