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

@@ -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: StyleSheet.hairlineWidth,
-    height: 1 / PixelRatio.get(),
     marginLeft: 4,
   },
 });

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: {

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: {

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: {

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: {

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: {

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,
   },

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',
   },

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,
   },

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: {

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: {

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 {
+module.exports = {
-  static flatten: typeof flattenStyle;
+  /**
+   * 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;

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() {}
 }

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
 }

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');