From 495defd69b0e47460c043d79d5b2bd48e3671681 Mon Sep 17 00:00:00 2001
From: Nicolas Gallagher <nicolasgallagher@gmail.com>
Date: Wed, 20 Dec 2017 11:54:13 +0000
Subject: [PATCH] [fix] StyleSheet.hairlineWidth on retina screens

---
 .../2-apis/StyleSheet/StyleSheetScreen.js     |  6 ++++-
 src/apis/StyleSheet/getHairlineWidth.js       | 22 +++++++++++++++++++
 src/apis/StyleSheet/index.js                  |  3 ++-
 3 files changed, 29 insertions(+), 2 deletions(-)
 create mode 100644 src/apis/StyleSheet/getHairlineWidth.js

diff --git a/docs/storybook/2-apis/StyleSheet/StyleSheetScreen.js b/docs/storybook/2-apis/StyleSheet/StyleSheetScreen.js
index 912fc3a5b..8787a11bc 100644
--- a/docs/storybook/2-apis/StyleSheet/StyleSheetScreen.js
+++ b/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>
 );
diff --git a/src/apis/StyleSheet/getHairlineWidth.js b/src/apis/StyleSheet/getHairlineWidth.js
new file mode 100644
index 000000000..6862a72fc
--- /dev/null
+++ b/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;
diff --git a/src/apis/StyleSheet/index.js b/src/apis/StyleSheet/index.js
index ada0a54d3..5b1154597 100644
--- a/src/apis/StyleSheet/index.js
+++ b/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;