useDimensions

Reactive screen dimensions. Tracks the device screen width, height, and pixel scale in real time, automatically updating when the screen size changes (e.g., on device rotation or multitasking split).

Usage

<script setup>
import { useDimensions } from '@thelacanians/vue-native-runtime'

const { width, height, scale } = useDimensions()
</script>

<template>
  <VView>
    <VText>Screen: {{ width }} x {{ height }}</VText>
    <VText>Scale: {{ scale }}x</VText>
  </VView>
</template>

API

useDimensions(): {
  width: Ref<number>,
  height: Ref<number>,
  scale: Ref<number>
}

Return Value

Property	Type	Description
`width`	`Ref<number>`	The current screen width in logical points.
`height`	`Ref<number>`	The current screen height in logical points.
`scale`	`Ref<number>`	The device pixel ratio (e.g., 2.0 for Retina, 3.0 for Super Retina).

Platform Support

Platform	Support
iOS	Uses `UIScreen.main.bounds` for initial values and emits updates from the Vue Native view controller during layout changes.
Android	Uses `DisplayMetrics` from the `WindowManager` for initial values and listens for configuration changes.
macOS	Uses `NSScreen` for initial values and emits updates when the Vue Native window is resized.

Example

<script setup>
import { computed } from 'vue'
import { useDimensions } from '@thelacanians/vue-native-runtime'

const { width, height } = useDimensions()
const isLandscape = computed(() => width.value > height.value)
</script>

<template>
  <VView :style="{ flex: 1, padding: 20 }">
    <VText :style="{ fontSize: 18 }">
      Orientation: {{ isLandscape ? 'Landscape' : 'Portrait' }}
    </VText>
    <VText>{{ width }} x {{ height }} points</VText>

    <VView
      :style="{
        width: isLandscape ? '50%' : '100%',
        height: 200,
        backgroundColor: '#3498db'
      }"
    >
      <VText :style="{ color: '#fff' }">Responsive Box</VText>
    </VView>
  </VView>
</template>

Notes

Initial values are fetched asynchronously from DeviceInfo.getInfo() after mount; the refs begin as 0 × 0 at scale 1.
Listens for dimensionsChange events from the native bridge to update values reactively.
Values are in logical points, not physical pixels. Multiply by scale to get physical pixel dimensions.
Automatically unsubscribes from dimension change events when the component unmounts.
On iPad, dimensions change during Split View and Slide Over multitasking.