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

[warmherz]

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

[davidleee]

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

Well, I've noticed that on iPhone Plus devices there will be a downsampling, so the actual pixel ratio would be 2.608.

[davidleee]

On iOS devices, since we know the exact native scale factor and UIKit scale factor,

thanks to https://developer.apple.com/library/archive/documentation/DeviceInformation/Reference/iOSDeviceCompatibility/Displays/Displays.html

my workaround would be to upsample manually if needed:

/*
 * scale / nativeScale = 3 / 2.608 ≈ 1.2
 */
const newHairlineWidth = StyleSheet.hairlineWidth * 1.2

[vorasudh]

Is there similar solution for Android devices as mentioned for iPhone 7 plus above?

[davidleee]

@vorasudh The idea is to calculate scale / nativeScale and multiply the result to the original hairlineWidth.

But sorry I am not familiar with Android, so I am not sure about how to get the nativeScale for Android devices.

[stale]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[vorasudh]

@davidleee , Thank you for the suggestion. It works great for iOS. I found a workaround for Android in the meantime. It seems many Android phone companies set their own default fonts that seems to be causing the problem. If you set 'Roboto' as default font of your app the issue on Android seems to go away.

[stale]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[stale]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please feel free to create a new issue with up-to-date information.