Shopify / react-native-skia

High-performance React Native Graphics using Skia
https://shopify.github.io/react-native-skia
MIT License
6.98k stars 452 forks source link

Bugfix(android): dynamic pixel density change #2679

Open kedikx opened 1 month ago

kedikx commented 1 month ago

This is a fix for #2635.

Summary:

wcandillon commented 1 month ago

Thanks a lot, can you recommend me a way to test the pixel density change? Is this an issue on iOS as well?

kedikx commented 1 month ago

Thanks a lot, can you recommend me a way to test the pixel density change?

Link to repo/app I used to spot the problem and test the solution. https://github.com/kedikx/rns-density

I also had a plan to add case to app/paper or dedicated app/density, but suppose it will be another story.

2635 also have the video for use case.

Is this an issue on iOS as well?

I am not aware of possibility to change density on iOS. Never saw it, at least from a user point of view.

kedikx commented 1 month ago

I have signed the CLA!

kedikx commented 1 month ago

can you recommend me a way to test the pixel density change?

General idea:

You need a random case where canvas and it's content depends on container size (i.e. "button skin").

Steps:

  1. Get canvas on the screen and check image - it should look like expected by design.
  2. Go to Android Settings -> Display -> Display size & text -> Change "Display Size".
  3. Go back to App: In case of problem: canvas size will change (could be verified with Fill), but "skin" will not be resized: it will either smaller or bigger than the container. Otherwise, it should look similar to (1) but shrink/expand together with container.

NB!: /android/app/src/main/AndroidManifest.xml should have 'density' in configChanges (fontScale also if you want to get things even more complicated):

android:configChanges="...|density|fontScale|..."