DEV Community

Meyti
Meyti

Posted on

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:

Top comments (0)