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

5.3k views Asked by At

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
1

There are 1 answers

0
Henrik R On BEST ANSWER

You can use hairlineWidth like this:

import {StyleSheet} from 'react-native';

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