iosreact-nativepixel-density

React Native: Half pixel border issues on high Pixel Density devices

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
Solution

  • You can use hairlineWidth like this:

    import {StyleSheet} from 'react-native';

const styles = StyleSheet.create({
  elementWithHalfPixelBorder: {
    borderWidth: StyleSheet.hairlineWidth,
  },
});