Nativescript: Background metrics require scale in Android but not in iOS

[cmermingas]

Please, provide the details below:

Did you verify this is a real problem by searching?

I searched and didn't find anything.

Tell us about the problem

I am writing an app that dynamically sets the background of a button by offsetting a large image that has a number of "frames" in it, like a sprite sheet. I am using a button but I am guessing that I could use a label, an image, or another component.

The "problem" is that to calculate the background size and position I need to take into account the main screen's scale in Android but not in iOS:

var platformModule = require('platform');

var scale = platformModule.isAndroid ? platformModule.screen.mainScreen.scale : 1; // Constant 1 for iOS
offsetX = getOffsetX() * scale; // <-- Scale needed here
offsetY = getOffsetY() * scale; // <-- Scale needed here

var button = page.getViewById('button-with-background');
button.style.width = BUTTON_WIDTH;
button.style.height = BUTTON_HEIGHT;
button.style.backgroundImage = "url('~/background_sheet.jpg')";
button.style.backgroundSize = "" + IMAGE_WIDTH * scale + " " + IMAGE_HEIGHT * scale; // <-- Scale needed here
button.style.backgroundPosition = "-" + offsetX + " -" + offsetY;

I'm new to NativeScript, so please correct me if I am wrong in expecting this to behave the same way across platforms: either all platforms require the scale or all platforms don't require it. If my expectation is incorrect, then maybe a note in the _Styling_ documentation would help.

Which platform(s) does your issue occur on?

Both

Please provide the following version numbers that your issue occurs with:

• CLI: 2.3.0
• Cross-platform modules: 2.3.0
• Runtime(s): 2.3.0 for iOS and Android
• Plugin(s): I haven't installed any plugins yet
  

  Please tell us how to recreate the issue in as much detail as possible.

You can see this with just CSS:

1. Create a page with a button in it.
2. Find an image. The one a I am using has dimensions: (2880, 3840)
3. Style the button as follows:

button { width: 300; height: 300; background-image: url('~/background_sheet.jpg'); background-size: 2880 3840; background-position: -100 -100; background-repeat: no-repeat; }

1. See that they look different in Android and iOS

[NickIliev]

Hellow @cmermingas

Different devices have different resolutions and scale factors, so that is the reason your variable for scale will result in different results on different emulators/devices. To have identical behaviour for that scenario you need to either use device-specific images (for both Android and iOS).
IN your app/App_Resources/ you can provide specific images for the different resolutions/scale factors. just as in the native environment. (for Example take a look at the drawable folders for Android).. To simplify the process of resizing images there are already some nice solutions made from the community (like this one)

Another option is to "detect" the width, height and scale factor of the current device with the help from the "platform" module

import platformModule = require("platform");

console.log("Screen width: " + platformModule.screen.mainScreen.widthPixels);
console.log("Screen height: " + platformModule.screen.mainScreen.heightPixels);
console.log("Screen scale: " + platformModule.screen.mainScreen.scale);

[cmermingas]

Hi @NickIliev

Thank you for your thorough response. I had read the Brosteins' blog and it was very informative.

Since my images are dynamic, I am using the screen metrics from the platform module, as you noted, to properly size the image to the widget during runtime. The "problem" that I am having is that I have to use the screen's scale in Android but not in iOS. So, I am doing:

let scale = isAndroid ? platformModule.screen.mainScreen.scale : 1;

It's not a big deal for me and it actually works. However, I decided to report this because I feel that this is not how it should work but I will let you make that call. One of the problems I see is that I don't know whether I will need to use the scale when new platforms are introduced to NS.

I made a small project to demonstrate the difference. Check it out with a couple of different emulators:

https://github.com/cmermingas/ns-image-test

Thank you very much!

[NickIliev]

@cmermingas I see your point - in the future, NativeScript will continue to follow the native concepts but the thing is that sometimes even the native concepts introduces breaking changes. Also, there are some major differences in iOS and Android when working with the things like coordinates, scales, etc. so it is expected to have some custom made modifications for your code to work in both universes.

[cmermingas]

It would be great if NativeScript documented these differences where appropriate so that your users don't have to discover them through a frustrating trial and error process.

[NathanaelA]

@cmermingas Just a FYI: actually scale is affected on iOS also in some areas Compare the iOS 4s to the 7. You get two totally different scaling factors for several things like fonts.

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.