/** * 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 StyleSheetRegistry = require('StyleSheetRegistry'); 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, 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] = StyleSheetRegistry.registerStyle(obj[key]); } return result; } };