From cd89016ee7168bb6971f800779e0878e9a70206f Mon Sep 17 00:00:00 2001 From: Kyle Corbitt Date: Fri, 15 Jan 2016 05:14:27 -0800 Subject: [PATCH] PixelRatio.pixel() Summary: This implements #5073. It adds a static method `PixelRatio.pixel()` which returns the smallest drawable line width, primarily for use in styles. It also updates the example apps to use the new function. Closes https://github.com/facebook/react-native/pull/5076 Reviewed By: svcscm Differential Revision: D2799849 Pulled By: nicklockwood fb-gh-sync-id: b83a77790601fe882affbf65531114e7c5cf4bdf --- Examples/Movies/MovieCell.js | 4 +- Examples/Movies/MovieScreen.js | 3 +- .../Navigator/BreadcrumbNavSample.js | 3 +- .../UIExplorer/Navigator/JumpingNavSample.js | 3 +- .../Navigator/NavigationBarSample.js | 3 +- .../UIExplorer/Navigator/NavigatorExample.js | 3 +- Examples/UIExplorer/NavigatorIOSExample.js | 5 +-- Examples/UIExplorer/TouchableExample.js | 4 +- Examples/UIExplorer/UIExplorerListBase.js | 3 +- Examples/UIExplorer/XHRExample.android.js | 3 +- Examples/UIExplorer/XHRExample.ios.js | 3 +- Libraries/StyleSheet/StyleSheet.js | 44 ++++++++++++++----- Libraries/Utilities/PixelRatio.js | 25 +++++------ React/Views/UIView+React.m | 2 +- .../src/Resolver/__tests__/Resolver-test.js | 1 + 15 files changed, 60 insertions(+), 49 deletions(-) diff --git a/Examples/Movies/MovieCell.js b/Examples/Movies/MovieCell.js index 62062cb2af..c90931c087 100644 --- a/Examples/Movies/MovieCell.js +++ b/Examples/Movies/MovieCell.js @@ -18,7 +18,6 @@ var React = require('react-native'); var { Image, - PixelRatio, Platform, StyleSheet, Text, @@ -99,8 +98,7 @@ var styles = StyleSheet.create({ }, cellBorder: { backgroundColor: 'rgba(0, 0, 0, 0.1)', - // Trick to get the thinest line the device can display - height: 1 / PixelRatio.get(), + height: StyleSheet.hairlineWidth, marginLeft: 4, }, }); diff --git a/Examples/Movies/MovieScreen.js b/Examples/Movies/MovieScreen.js index 09d6544dff..ff228a8a3e 100644 --- a/Examples/Movies/MovieScreen.js +++ b/Examples/Movies/MovieScreen.js @@ -18,7 +18,6 @@ var React = require('react-native'); var { Image, - PixelRatio, ScrollView, StyleSheet, Text, @@ -152,7 +151,7 @@ var styles = StyleSheet.create({ }, separator: { backgroundColor: 'rgba(0, 0, 0, 0.1)', - height: 1 / PixelRatio.get(), + height: StyleSheet.hairlineWidth, marginVertical: 10, }, castTitle: { diff --git a/Examples/UIExplorer/Navigator/BreadcrumbNavSample.js b/Examples/UIExplorer/Navigator/BreadcrumbNavSample.js index 62196e5f2f..e05a8c39e8 100644 --- a/Examples/UIExplorer/Navigator/BreadcrumbNavSample.js +++ b/Examples/UIExplorer/Navigator/BreadcrumbNavSample.js @@ -15,7 +15,6 @@ var React = require('react-native'); var { - PixelRatio, Navigator, StyleSheet, ScrollView, @@ -131,7 +130,7 @@ var styles = StyleSheet.create({ button: { backgroundColor: 'white', padding: 15, - borderBottomWidth: 1 / PixelRatio.get(), + borderBottomWidth: StyleSheet.hairlineWidth, borderBottomColor: '#CDCDCD', }, buttonText: { diff --git a/Examples/UIExplorer/Navigator/JumpingNavSample.js b/Examples/UIExplorer/Navigator/JumpingNavSample.js index eecabcbce9..54fe312c22 100644 --- a/Examples/UIExplorer/Navigator/JumpingNavSample.js +++ b/Examples/UIExplorer/Navigator/JumpingNavSample.js @@ -16,7 +16,6 @@ var React = require('react-native'); var { Navigator, - PixelRatio, StyleSheet, ScrollView, TabBarIOS, @@ -185,7 +184,7 @@ var styles = StyleSheet.create({ button: { backgroundColor: 'white', padding: 15, - borderBottomWidth: 1 / PixelRatio.get(), + borderBottomWidth: StyleSheet.hairlineWidth, borderBottomColor: '#CDCDCD', }, buttonText: { diff --git a/Examples/UIExplorer/Navigator/NavigationBarSample.js b/Examples/UIExplorer/Navigator/NavigationBarSample.js index 77e0740028..25f45f0ab3 100644 --- a/Examples/UIExplorer/Navigator/NavigationBarSample.js +++ b/Examples/UIExplorer/Navigator/NavigationBarSample.js @@ -16,7 +16,6 @@ var React = require('react-native'); var { - PixelRatio, Navigator, ScrollView, StyleSheet, @@ -164,7 +163,7 @@ var styles = StyleSheet.create({ button: { backgroundColor: 'white', padding: 15, - borderBottomWidth: 1 / PixelRatio.get(), + borderBottomWidth: StyleSheet.hairlineWidth, borderBottomColor: '#CDCDCD', }, buttonText: { diff --git a/Examples/UIExplorer/Navigator/NavigatorExample.js b/Examples/UIExplorer/Navigator/NavigatorExample.js index aa15641093..d15939886f 100644 --- a/Examples/UIExplorer/Navigator/NavigatorExample.js +++ b/Examples/UIExplorer/Navigator/NavigatorExample.js @@ -16,7 +16,6 @@ var React = require('react-native'); var { Navigator, - PixelRatio, ScrollView, StyleSheet, Text, @@ -190,7 +189,7 @@ var styles = StyleSheet.create({ button: { backgroundColor: 'white', padding: 15, - borderBottomWidth: 1 / PixelRatio.get(), + borderBottomWidth: StyleSheet.hairlineWidth, borderBottomColor: '#CDCDCD', }, buttonText: { diff --git a/Examples/UIExplorer/NavigatorIOSExample.js b/Examples/UIExplorer/NavigatorIOSExample.js index 4a2011a654..08d227c3f0 100644 --- a/Examples/UIExplorer/NavigatorIOSExample.js +++ b/Examples/UIExplorer/NavigatorIOSExample.js @@ -20,7 +20,6 @@ var ViewExample = require('./ViewExample'); var createExamplePage = require('./createExamplePage'); var { AlertIOS, - PixelRatio, ScrollView, StyleSheet, Text, @@ -227,7 +226,7 @@ var styles = StyleSheet.create({ }, line: { backgroundColor: '#bbbbbb', - height: 1 / PixelRatio.get(), + height: StyleSheet.hairlineWidth, }, row: { backgroundColor: 'white', @@ -236,7 +235,7 @@ var styles = StyleSheet.create({ paddingVertical: 15, }, separator: { - height: 1 / PixelRatio.get(), + height: StyleSheet.hairlineWidth, backgroundColor: '#bbbbbb', marginLeft: 15, }, diff --git a/Examples/UIExplorer/TouchableExample.js b/Examples/UIExplorer/TouchableExample.js index f8ced267db..7b0bf2c0b3 100644 --- a/Examples/UIExplorer/TouchableExample.js +++ b/Examples/UIExplorer/TouchableExample.js @@ -229,7 +229,7 @@ var styles = StyleSheet.create({ logBox: { padding: 20, margin: 10, - borderWidth: 1 / PixelRatio.get(), + borderWidth: StyleSheet.hairlineWidth, borderColor: '#f0f0f0', backgroundColor: '#f9f9f9', }, @@ -237,7 +237,7 @@ var styles = StyleSheet.create({ padding: 10, margin: 10, height: 120, - borderWidth: 1 / PixelRatio.get(), + borderWidth: StyleSheet.hairlineWidth, borderColor: '#f0f0f0', backgroundColor: '#f9f9f9', }, diff --git a/Examples/UIExplorer/UIExplorerListBase.js b/Examples/UIExplorer/UIExplorerListBase.js index b4af76e60e..17ecd8dc2c 100644 --- a/Examples/UIExplorer/UIExplorerListBase.js +++ b/Examples/UIExplorer/UIExplorerListBase.js @@ -18,7 +18,6 @@ var React = require('react-native'); var { ListView, - PixelRatio, StyleSheet, Text, TextInput, @@ -159,7 +158,7 @@ var styles = StyleSheet.create({ paddingVertical: 8, }, separator: { - height: 1 / PixelRatio.get(), + height: StyleSheet.hairlineWidth, backgroundColor: '#bbbbbb', marginLeft: 15, }, diff --git a/Examples/UIExplorer/XHRExample.android.js b/Examples/UIExplorer/XHRExample.android.js index 5a46d8dd97..55b1a51787 100644 --- a/Examples/UIExplorer/XHRExample.android.js +++ b/Examples/UIExplorer/XHRExample.android.js @@ -17,7 +17,6 @@ var React = require('react-native'); var { - PixelRatio, ProgressBarAndroid, StyleSheet, Text, @@ -312,7 +311,7 @@ var styles = StyleSheet.create({ flexDirection: 'row', paddingVertical: 8, alignItems: 'center', - borderBottomWidth: 1 / PixelRatio.get(), + borderBottomWidth: StyleSheet.hairlineWidth, borderBottomColor: 'grey', }, textButton: { diff --git a/Examples/UIExplorer/XHRExample.ios.js b/Examples/UIExplorer/XHRExample.ios.js index d8d370319a..5d909b3cb7 100644 --- a/Examples/UIExplorer/XHRExample.ios.js +++ b/Examples/UIExplorer/XHRExample.ios.js @@ -21,7 +21,6 @@ var { CameraRoll, Image, LinkingIOS, - PixelRatio, ProgressViewIOS, StyleSheet, Text, @@ -343,7 +342,7 @@ var styles = StyleSheet.create({ flexDirection: 'row', paddingVertical: 8, alignItems: 'center', - borderBottomWidth: 1 / PixelRatio.get(), + borderBottomWidth: StyleSheet.hairlineWidth, borderBottomColor: 'grey', }, photoLabel: { diff --git a/Libraries/StyleSheet/StyleSheet.js b/Libraries/StyleSheet/StyleSheet.js index aa997b0a48..5774d2663b 100644 --- a/Libraries/StyleSheet/StyleSheet.js +++ b/Libraries/StyleSheet/StyleSheet.js @@ -11,9 +11,16 @@ */ 'use strict'; +var PixelRatio = require('PixelRatio'); var StyleSheetRegistry = require('StyleSheetRegistry'); var StyleSheetValidation = require('StyleSheetValidation'); -var flattenStyle = require('flattenStyle'); + +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 @@ -59,10 +66,32 @@ var flattenStyle = require('flattenStyle'); * - It also allows to send the style only once through the bridge. All * subsequent uses are going to refer an id (not implemented yet). */ -class StyleSheet { - static flatten: typeof flattenStyle; +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, - static create(obj: {[key: string]: any}): {[key: string]: number} { + 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); @@ -70,9 +99,4 @@ class StyleSheet { } return result; } -} - -/* TODO(brentvatne) docs are needed for this */ -StyleSheet.flatten = flattenStyle; - -module.exports = StyleSheet; +}; diff --git a/Libraries/Utilities/PixelRatio.js b/Libraries/Utilities/PixelRatio.js index 940890ccec..e7ab32ca56 100644 --- a/Libraries/Utilities/PixelRatio.js +++ b/Libraries/Utilities/PixelRatio.js @@ -16,20 +16,6 @@ var Dimensions = require('Dimensions'); /** * PixelRatio class gives access to the device pixel density. * - * There are a few use cases for using PixelRatio: - * - * ### Displaying a line that's as thin as the device permits - * - * A width of 1 is actually pretty thick on devices with high pixel density - * (such as iPhone 4+ and many Android devices), we can make one that's - * thinner using a width of `1 / PixelRatio.get()`. - * It's a technique that works on all the devices independent of their - * pixel density. - * - * ``` - * style={{ borderWidth: 1 / PixelRatio.get() }} - * ``` - * * ### Fetching a correctly sized image * * You should get a higher resolution image if you are on a high pixel density @@ -91,6 +77,17 @@ class PixelRatio { return Math.round(layoutSize * PixelRatio.get()); } + /** + * Rounds a layout size (dp) to the nearest layout size that corresponds to + * an integer number of pixels. For example, on a device with a PixelRatio + * of 3, `PixelRatio.roundToNearestPixel(8.4) = 8.33`, which corresponds to + * exactly (8.33 * 3) = 25 pixels. + */ + static roundToNearestPixel(layoutSize: number): number { + var ratio = PixelRatio.get(); + return Math.round(layoutSize * ratio) / ratio; + } + // No-op for iOS, but used on the web. Should not be documented. static startDetecting() {} } diff --git a/React/Views/UIView+React.m b/React/Views/UIView+React.m index fae5e021ac..bbc74901e3 100644 --- a/React/Views/UIView+React.m +++ b/React/Views/UIView+React.m @@ -82,7 +82,7 @@ self.bounds = bounds; } -- (void)reactSetInheritedBackgroundColor:(UIColor *)inheritedBackgroundColor +- (void)reactSetInheritedBackgroundColor:(__unused UIColor *)inheritedBackgroundColor { // Does nothing by default } diff --git a/packager/react-packager/src/Resolver/__tests__/Resolver-test.js b/packager/react-packager/src/Resolver/__tests__/Resolver-test.js index 6712f00b4a..82184c61bb 100644 --- a/packager/react-packager/src/Resolver/__tests__/Resolver-test.js +++ b/packager/react-packager/src/Resolver/__tests__/Resolver-test.js @@ -10,6 +10,7 @@ jest.dontMock('../') .dontMock('underscore') + .dontMock('PixelRatio') .dontMock('../../DependencyResolver/lib/extractRequires') .dontMock('../../DependencyResolver/lib/replacePatterns');