Purii
Non-integer device scaling causing issues with <Separator> hairline widths
On some Android devices using non-integer device scaling (eg x2.125 or x2.625) the size of some components cause the hairline <Separator>'s get drawn misaligned to the pixel grid, cause some of them to appear larger/smaller or even disappear (depending on where they fall on the fractional pixel)
I've found calling PixelRatio.roundToNearestPixel() on the <Cell>'s minHeight fixes this issue. I suspect there's probably other places this is causing similar problems, but this is the main one as far as I can tell.
Left: before, Right: after. The inline preview is probably shrunk down a little and might not look any better than before, so click through to compare the full resolution screenshot
For all devices using integer scaling this will basically change nothing, but it might cause the <Cell /> to grow/shrink by ~1 device pixel on devices with fractional scaling.
| DPR | 44 | nearestPixel(44) |
|---|---|---|
| 1x | 44 | 44 |
| 2x | 88 | 88 |
| 2.125x | 93.5 | 94 |
| 2.625x | 115.5 | 116 |
I think it should just be a case of changing this line:
https://github.com/Purii/react-native-tableview-simple/blob/6b8f3aa7564df153e62b0f87776a836d745e7dd7/src/components/Cell.tsx#L433
to this:
minHeight: PixelRatio.roundToNearestPixel(44)
More info: https://reactnative.dev/docs/pixelratio#roundtonearestpixel
Let me know if you'd like me to put through a quick PR.
Hi @philo23! Thanks for the bug report. Can you observe that behavior on actual hardware devices as well? I saw that earlier in some emulator environments as well, which was never the case for the actual hardware. It was always due emulation / scaling issues.
Yep, the two screenshots above are from a physical Android device.
The left/right previews were made by just changing the screen scaling to hit the 2.125x pixel scaling ratio. I've also had reports from another user on an Android device with the 2.625x scaling ratio.