/** * Copyright (c) 2015-present, Facebook, Inc. * All rights reserved. * * This source code is licensed under the BSD-style license found in the * LICENSE file in the root directory of this source tree. An additional grant * of patent rights can be found in the PATENTS file in the same directory. * * @providesModule StyleSheet * @flow */ 'use strict'; var PixelRatio = require('PixelRatio'); var ReactNativePropRegistry = require('ReactNativePropRegistry'); var StyleSheetValidation = require('StyleSheetValidation'); var flatten = require('flattenStyle'); var hairlineWidth = PixelRatio.roundToNearestPixel(0.4); if (hairlineWidth === 0) { hairlineWidth = 1 / PixelRatio.get(); } /** * 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: * * ``` * * * * ``` * * 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). */ module.exports = { /** * 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. */ hairlineWidth, /** * Flattens an array of style objects, into one aggregated style object. * Alternatively, this method can be used to lookup IDs, returned by * StyleSheet.register. * * > **NOTE**: Exercise caution as abusing this can tax you in terms of * > optimizations. * > * > IDs enable optimizations through the bridge and memory in general. Refering * > to style objects directly will deprive you of these optimizations. * * Example: * ``` * var styles = StyleSheet.create({ * listItem: { * flex: 1, * fontSize: 16, * color: 'white' * }, * selectedListItem: { * color: 'green' * } * }); * * StyleSheet.flatten([styles.listItem, styles.selectedListItem]) * // returns { flex: 1, fontSize: 16, color: 'green' } * ``` * Alternative use: * ``` * StyleSheet.flatten(styles.listItem); * // return { flex: 1, fontSize: 16, color: 'white' } * // Simply styles.listItem would return its ID (number) * ``` * This method internally uses `StyleSheetRegistry.getStyleByID(style)` * to resolve style objects represented by IDs. Thus, an array of style * objects (instances of StyleSheet.create), are individually resolved to, * their respective objects, merged as one and then returned. This also explains * the alternative use. */ flatten, /** * Creates a StyleSheet style reference from the given object. */ create(obj: {[key: string]: any}): {[key: string]: number} { var result = {}; for (var key in obj) { StyleSheetValidation.validateStyle(key, obj); result[key] = ReactNativePropRegistry.register(obj[key]); } return result; } };