useWindowDimensions

Important: The Vega SDK supports many of the React Native version 0.83 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 V0.83 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 V0.83, see the React Native documentation, version 0.83. For the most current feature information, see the Release Notes.

import {useWindowDimensions} from 'react-native';

useWindowDimensions automatically updates all of its values when screen size or font scale changes. You can get your application window's width and height like so:

const {height, width} = useWindowDimensions();

Example

Copied to clipboard.

import React from 'react';
import {StyleSheet, Text, useWindowDimensions} from 'react-native';
import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';

const App = () => {
  const {height, width, scale, fontScale} = useWindowDimensions();
  return (
    <SafeAreaProvider>
      <SafeAreaView 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>
      </SafeAreaView>
    </SafeAreaProvider>
  );
};
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.

useKeplerWindowDimensions is the preferred API for React Native for Vega version 2 applications. Unlike useWindowDimensions, it updates when any application component's window dimensions update.

Last updated: May 13, 2026