useWindowDimensions

Important: The Vega SDK supports many of the React Native version 0.72 components and APIs. You can use the supported components and APIs in the same manner as an ordinary React Native app. This page lists a specific React Native feature supported by the Vega SDK and contains React Native v72 documentation from the reactnative.dev website created by Meta and other contributors and licensed under the Attribution 4.0 International License. For more information about React Native v72, see the React Native documentation, version 0.72. For the most current feature information, see the Release Notes.

useWindowDimensions automatically updates all of its values when screen size or font scale changes.

import {useWindowDimensions} from 'react-native';

The following snippet show how to get your app' window width and height like so:

const {height, width} = useWindowDimensions();

Example

import React from 'react';
import {View, StyleSheet, Text, useWindowDimensions} from 'react-native';

const App = () => {
  const {height, width, scale, fontScale} = useWindowDimensions();
  return (
    <View style={styles.container}>
      <Text style={styles.header}>Window Dimension Data</Text>
      <Text>Height: {height}</Text>
      <Text>Width: {width}</Text>
      <Text>Font scale: {fontScale}</Text>
      <Text>Pixel ratio: {scale}</Text>
    </View>
  );
};
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  header: {
    fontSize: 20,
    marginBottom: 12,
  },
});

export default App;

Properties

fontScale

useWindowDimensions().fontScale;

The scale of the font currently used. Some operating systems allow users to scale their font sizes larger or smaller for reading comfort. This property will let you know what is in effect.

height

useWindowDimensions().height;

The height in pixels of the window or screen your app occupies.

scale

useWindowDimensions().scale;

The pixel ratio of the device your app is running on. The values can be:

1 which indicates that one point equals one pixel (usually PPI/DPI of 96, 76 on some platforms).
2 or 3 which indicates a Retina or high DPI display.

width

useWindowDimensions().width;

The width in pixels of the window or screen your app occupies.

Last updated: Sep 30, 2025