useKeplerWindowDimensionsV2

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.

useKeplerWindowDimensionsV2 returns the DisplayMetricsKepler entry for each surface that currently exists.

DisplayMetricsKepler Type:

/**
 * Kepler 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 the size of any surface changes.

The following example shows how to get a surface window's width and height:

const windowWidth = useKeplerWindowDimensionsV2().width;
const windowHeight = useKeplerWindowDimensionsV2().height;

Example

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

const App = () => {
    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

useKeplerWindowDimensionsV2().fontScale;

The scale of the font currently used.

height

useKeplerWindowDimensionsV2().height;

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

scale

useKeplerWindowDimensionsV2().scale;

The pixel ratio of the device your app is running on.

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

width

useKeplerWindowDimensionsV2().width;

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

rootTag

const rootTag = useContext(RootTagContext);

The unique root tag for the surface that corresponds with this entry. Root tag also takes care of multiple instances of the same interactive component to be able to uniquely identify each instance.

Last updated: Sep 30, 2025