[fix] StyleSheet.hairlineWidth on retina screens

Author: necolas

docs/storybook/2-apis/StyleSheet/StyleSheetScreen.js

@@ -104,7 +104,11 @@ StyleSheet.flatten([styles.listItem, styles.selectedListItem]);`
         typeInfo="object"
       />
 
-      <DocItem name="hairlineWidth" typeInfo="number" />
+      <DocItem
+        description="Enables borders of just one physical pixel on retina screens, otherwise it is equal to a CSS value of 1px."
+        name="hairlineWidth"
+        typeInfo="number"
+      />
     </Section>
   </UIExplorer>
 );

src/apis/StyleSheet/getHairlineWidth.js

@@ -0,0 +1,22 @@
+/**
+ * Based on http://dieulot.net/css-retina-hairline
+ * @noflow
+ */
+
+import { canUseDOM } from 'fbjs/lib/ExecutionEnvironment';
+
+const getHairlineWidth = () => {
+  let hairlineWidth = 1;
+  if (canUseDOM && window.devicePixelRatio && window.devicePixelRatio >= 2) {
+    const node = document.createElement('div');
+    node.style.border = '.5px solid transparent';
+    document.body.appendChild(node);
+    if (node.offsetHeight === 1) {
+      hairlineWidth = 0.5;
+    }
+    document.body.removeChild(node);
+  }
+  return hairlineWidth;
+};
+
+export default getHairlineWidth;

src/apis/StyleSheet/index.js

@@ -10,6 +10,7 @@
  */
 
 import flattenStyle from './flattenStyle';
+import getHairlineWidth from './getHairlineWidth';
 import modality from '../../modules/modality';
 import StyleRegistry from './registry';
 
@@ -58,7 +59,7 @@ const StyleSheet = {
   getStyleSheets() {
     return StyleRegistry.getStyleSheets();
   },
-  hairlineWidth: 1
+  hairlineWidth: getHairlineWidth()
 };
 
 export default StyleSheet;