Search code examples
nativescriptnativescript-angularnativescript-vue

Nativescript translateY different on Android and iOS

I am creating a BottonShet component in Nativescript-Vue. The problem I have is the following:

Uploading the frame using translateY or animation behaves differently on iOS and Android.

I have a component:

In the botton sheet I have an element that is 150 high. If I apply a

frame.translateY = Screen.mainScreen.heightDIPs - 150

in android it reaches a high and in ios it reaches another. What's going on here? How can I calculate a height so that it is the same in all phones from 150 and the screen height?

enter image description here

In this documentation it says that the translate of the animation is measured in DIPs so this should work well on all devices.

In the mentioned tutorial, it makes an if to apply one height or another depending on the platform, I don't want that, I want to be able to calculate so I don't have to be testing on all devices.

Thanks a lot.

Solution

  • I've ran into this issue recently what I did was get the activity content height an used that for my calculations so now I can do frame.translateY = activityHeight - 150

    get activityHeight(): number {
    if(isIOS){
      return Screen.mainScreen.heightDIPs;
    }
    const activity = Application.android.foregroundActivity || Application.android.startActivity;
    if(!activity) return 0;
    const rootView = activity.findViewById(android.R.id.content);
    if(!rootView) return 0;
    return rootView.getHeight() / Screen.mainScreen.scale || 0;
  }