9

I'm using 0.5px borders in my React Native app. This works great on most devices but on an iPhone 6 plus these borders show up blurry. After reading up on pixel ratios here I've resolved to using something like below.

I wonder if anyone else has been able to successfully use 0.5px borders on high pixel density devices?

borderWidth: PixelRatio.get() >= 3 ? 1 : 0.5
Anshuul Kai
  • 3,876
  • 2
  • 27
  • 48
  • 2
    Why not `Stylesheet.hairlineWidth`? –  Jan 07 '17 at 23:02
  • Wan't aware of such a thing. Thank you! BTW, is the original issue considered a bug or do high density devices not support half pixel lines? – Anshuul Kai Jan 07 '17 at 23:42
  • I think that 0.5px on high density devices simple not align to whole screen pixels. See in source code how hairlineWidth calculated. –  Jan 07 '17 at 23:46

1 Answers1

21

You can use hairlineWidth like this:

import {StyleSheet} from 'react-native';

const styles = StyleSheet.create({
  elementWithHalfPixelBorder: {
    borderWidth: StyleSheet.hairlineWidth,
  },
});
Henrik R
  • 4,742
  • 1
  • 24
  • 23