diff --git a/docs/storybook/2-apis/StyleSheet/StyleSheetScreen.js b/docs/storybook/2-apis/StyleSheet/StyleSheetScreen.js
index 912fc3a5..8787a11b 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"
/>
-
+
);
diff --git a/src/apis/StyleSheet/getHairlineWidth.js b/src/apis/StyleSheet/getHairlineWidth.js
new file mode 100644
index 00000000..6862a72f
--- /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 ada0a54d..5b115459 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;