StyleSheet.hairlineWidth not visible on devices with decimal PixelRatio

[rvaitkus23]

• [ ✔️ ] Review the documentation: https://facebook.github.io/react-native
• [ ✔️ ] Search for existing issues: https://github.com/facebook/react-native/issues
• [ ✔️ ] Use the latest React Native release: https://github.com/facebook/react-native/releases

Environment

Run react-native info in your terminal and paste its contents here.

  React Native Environment Info:
    System:
      OS: macOS High Sierra 10.13.6
      CPU: x64 Intel(R) Core(TM) i5-7267U CPU @ 3.10GHz
      Memory: 28.75 MB / 8.00 GB
      Shell: 3.2.57 - /bin/bash
    Binaries:
      Node: 8.11.2 - ~/.nvm/versions/node/v8.11.2/bin/node
      Yarn: 1.12.3 - /usr/local/bin/yarn
      npm: 5.6.0 - ~/.nvm/versions/node/v8.11.2/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    SDKs:
      iOS SDK:
        Platforms: iOS 12.1, macOS 10.14, tvOS 12.1, watchOS 5.1
      Android SDK:
        Build Tools: 23.0.1, 23.0.3, 25.0.0, 25.0.1, 25.0.2, 25.0.3, 26.0.3, 27.0.3
        API Levels: 21, 23, 25, 26, 27
    IDEs:
      Android Studio: 3.2 AI-181.5540.7.32.5014246
      Xcode: 10.1/10B61 - /usr/bin/xcodebuild
    npmPackages:
      react: 16.6.1 => 16.6.1
      react-native: 0.57.7 => 0.57.7
    npmGlobalPackages:
      create-react-native-app: 1.0.0
      react-native-git-upgrade: 0.2.7

Description

StyleSheet.hairlineWidth works good for most of the devices. If device has pixel ratio that is not intiger it is not visible in some cases. For example, using in list it does render every second separator. And in some cases you can see background through list items, indicating that size of list item is calculated improperly.

I am facing this issue on Samsung S9+. Result of PixelRatio.get() is 2.625

[oscarteg]

Same problem here on LG Nexus 5X. Some lines with the border width set to hairlinewidth are not showing. The PixelRatio.get() also gives me 2.625.

@johnroest

[edenjw]

Same problem here on Samsung S8+ when power saving mode is active (screen resolution: HD+/FHD+ only) When the resolution is WQHD+, all lines seem to be shown.

[lehresman]

I can confirm this on the Nexus 5 (pixel ratio of 2.625) and in my simulator of a Pixel 2 (pixel ratio 2.625).

[lehresman]

As an example, here is what I'm seeing. Notice how every other row in the list does not print a bottom border. The borderBottomWidth is set to StyleSheet.hairlineWidth.

[davidleee]

Sometimes this happens on iOS, already spotted this problem on an iPhone 7 Plus, but I couldn't find the pattern