After upgrading from 22 to 25, all borders in Android are uneven with the top being thicker than the bottom!

Expo SDK
1

Expo 22

Screenshot_20180128-141433
Screenshot_20180128-1414331440×2960 473 KB

  • Note the nice rounded corners and equal width around the whole border

Expo 25

Screenshot_20180128-140747
Screenshot_20180128-1407471440×2960 287 KB

  • Note the jagged edges and uneven border width

I guess this is a react native thing, maybe a drawing optimization gone wrong?

1 Like
2

hello! can you reproduce this on snack.expo.io? you can provide an example that uses sdk 22 and sdk25 by switching the version in the bottom right

3

Yeah for sure. Learned some things on the way:

  • Only affects 24 and 25.
  • I tried on a Note 8 a Galaxy S8, and reproduced the same as the image, using 24 and 25.
  • On a Moto G (3rd gen), and a Galaxy J9, the rendering is also off in 24 and 25, but its a lot less noticeable due to the low resolution of the screens.
  • On the Moto G the borders looked the best. Probably because the physical screen is a perfect multiple of whatever the density-independent screen is being used in react native. Still, though, the borderRadius has aliasing, but it’s like, sloppy aliasing? Rounding errors?

https://snack.expo.io/BytwPGarz

1 Like
4

Yeah I’m getting the same issue after upgrading to v25. Any solutions would be super helpful.

Tested on latest hardware (Galaxy s8).

5

In what might be a related issue (which can be explored using the same Snack), I’m finding that when my iPad Pro renders a 1px border, the right border is way too big, like 2px, unless a borderRadius of at least 2 is set. On my iPhone (7 Plus), the effect is more subtle, it’s more like it’s 50% too big under the same conditions. This problem isn’t visible on the Appetize preview, and it doesn’t seem to depend on whether SDK is 21 or 25.

6

This topic was automatically closed 20 days after the last reply. New replies are no longer allowed.