useVegaWindowDimensionsV2

useKeplerWindowDimensionsV2 returns an array of DisplayMetricsKepler entries for each surface that currently exists.

DisplayMetricsVega Type:

/**
 * Vega window Dimensions with module name
 * @platform kepler
 */
export interface DisplayMetricsKepler {
    width: number;
    height: number;
    scale: number;
    fontScale: number;
    moduleName: string; // the name used to register the main React app component in the React Native AppRegistry for the surface (window/screen).
}

import {useKeplerWindowDimensionsV2} from 'react-native';

useKeplerWindowDimensionsV2 automatically updates values when any surface's size changes. You can get a surface window's width and height like so:

const windowWidth = useWindowDimensions()[<index>].width;
    const windowHeight = useWindowDimensions()[
    <index>].height;

The available array indexes depends on the number of surfaces that exist. If there is no surface the array will be empty. If there is only one surface index 0 will be that surface. If there are multiple surfaces the array will have entries for each surface. The moduleName property for each entry matches the AppRegistry name for the app component that corresponds to a surface.

Example

import React from "react";
import { View, StyleSheet, Text, useKeplerWindowDimensions } from "react-native";

const App = () => {
  const KeplerWindowDimensions = () => {
    const dimensions = useKeplerWindowDimensionsV2();

    return (
        <View test_id="kepler-window-dimensions-app" style={DEFAULT_STYLES.CONTAINER}>
            <Text style={styles.displayText}>Module states: </Text>
            <Text style={styles.commentText}>
                {` height: ${dimensions.height}, width: ${dimensions.width}, scale: ${dimensions.scale}, 
                    fontScale: ${dimensions.fontScale}`}
            </Text>
        </View>
    );
};

}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center"
  },
  displayText: {
     fontSize: 20,
     fontWeight: "bold"
  },
  commentText: {
     fontSize: 16
  }
});

export default App;

• The useDimensions hook from the community React native hooks library aims to make handling screen/window size changes easier to work with.
• React Native Responsive Dimensions also comes with responsive hooks.

Properties

fontScale Vega v2

useKeplerWindowDimensionsV2()[<index>].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. The available array indexes depends on the number of surfaces that exist.

height Vega v2

useKeplerWindowDimensionsV2()[<index>].height;

The height in pixels of the window or screen your app occupies. The available array indexes depends on the number of surfaces that exist.

scale Vega v2

useKeplerWindowDimensionsV2()[<index>].scale;

The pixel ratio of the device your app is running on. The available array indexes depends on the number of surfaces that exist.

A value of 1 indicates PPI/DPI of 96 (76 on some platforms). 2 indicates a Retina or high DPI display.

width Vega v2

useKeplerWindowDimensionsV2()[<index>].width;

The width in pixels of the window or screen your app occupies. The available array indexes depends on the number of surfaces that exist.

rootTag Vega v2

const rootTag = useContext(RootTagContext);

The unique root tag for the surface that corresponds with this entry. The available array indexes depends on the number of surfaces that exist. Root tag will also take care of multiple instances of the same interactive component to be able to uniquely identify each instance

Last updated: May 13, 2026