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:

• https://stackoverflow.com/questions/37741179
• https://stackoverflow.com/questions/35464292
• https://github.com/NativeScript/NativeScript/issues/4329#issuecomment-306754056
• https://docs.nativescript.org/api-reference/classes/_ui_core_view_.view