DEV Community

Meyti
Meyti

Posted on

3 4

Get dimensions in nativescript-vue

Get screen size:

docs

import { screen } from 'platform'

screen.mainScreen.widthDIPs 
screen.mainScreen.widthPixels
screen.mainScreen.heightDIPs
screen.mainScreen.heightPixels

Get element size:


<Button ref="myElement" width="300" height="auto" />

this.$refs.myElement.nativeView.width  // 300
this.$refs.myElement.nativeView.height  // 'auto'
this.$refs.myElement.nativeView.getMeasuredWidth() // 600 (on Nexus 4)
this.$refs.myElement.nativeView.getMeasuredHeight()
this.$refs.myElement.nativeView.getActualSize() // { width: 300, height: 200 }

Note:
Make sure the element already rendered, and seems there is no such event to set a hook, so just take a nap!

export default {
  mounted () {
    setTimeout(() => {
      console.log(this.$refs.myElement.nativeView.width)
    }, 10)
  }
}

Links:

Image of Datadog

Create and maintain end-to-end frontend tests

Learn best practices on creating frontend tests, testing on-premise apps, integrating tests into your CI/CD pipeline, and using Datadog’s testing tunnel.

Download The Guide

Top comments (0)

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more