Dimensions
useWindowDimensions is the preferred API for React components. Unlike Dimensions, it updates as the window's dimensions update. This works nicely with the React paradigm.@deprecated
useKeplerWindowDimensionsis the preferred API for React Native for Vega applications. UnlikeuseWindowDimensions, it updates when any application component's window dimension update.
useKeplerWindowDimensionsV2use this hook instead which updates the dimensions based on root tag to handle multiple interactive component and multiple instances
import {Dimensions} from 'react-native';
You can get the application window's width and height using the following code:
const windowWidth = Dimensions.get('window').width;
const windowHeight = Dimensions.get('window').height;
React Native for Vega applications can get the dimensions for all application component windows using the following code:
import { DisplayMetrics, Dimensions } from 'react-native';
export const useKeplerWindowDimensionsV2 = ():DisplayMetrics => {
const rootTag = useContext(RootTagContext);
const [dimensions,
setDimensions] = useState(NativeDeviceInfo.getDimensionsV2(rootTag));
useEffect(() => {
const handleChange = (newDimensions) => {
if (dimensions !== newDimensions) {
setDimensions(newDimensions);
}
}
};
DisplayMetrics Type:
/**
* Vega window Dimensions
* @platform kepler
*/
export interface DisplayMetricsKepler {
width: number;
height: number;
scale: number;
fontScale: number;
}
If your React Native for Vega application only has a single application component, you can just rely
on Dimensions.get('window'). If you have more than one application component you will need to
use Dimensions.get('windows') and identify the dimensions for the particular component you are interested in.
When there is more than one Vega app component, Dimensions.get('window') returns dimensions for the first component
created in the app process.
StyleSheet).If you are targeting foldable devices or devices which can change the screen size or app window size, you can use the event listener available in the Dimensions module as shown in the following example.
Example Vega
import React, {useState, useEffect} from 'react';
import {StyleSheet, Text, Dimensions} from 'react-native';
import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
const windowDimensions = Dimensions.get('window');
const screenDimensions = Dimensions.get('screen');
const App = () => {
const [dimensions, setDimensions] = useState({
window: windowDimensions,
screen: screenDimensions,
});
useEffect(() => {
const subscription = Dimensions.addEventListener(
'change',
({window, screen}) => {
setDimensions({window, screen});
},
);
return () => subscription?.remove();
});
return (
<SafeAreaProvider>
<SafeAreaView style={styles.container}>
<Text style={styles.header}>Window Dimensions</Text>
{Object.entries(dimensions.window).map(([key, value]) => (
<Text>
{key} - {value}
</Text>
))}
<Text style={styles.header}>Screen Dimensions</Text>
{Object.entries(dimensions.screen).map(([key, value]) => (
<Text>
{key} - {value}
</Text>
))}
</SafeAreaView>
</SafeAreaProvider>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
header: {
fontSize: 16,
marginVertical: 10,
},
});
export default App;
import React, { Component } from 'react';
import {
View,
StyleSheet,
Text,
Dimensions,
DisplayMetricsKepler
} from 'react-native';
let windows = Dimensions.get('windows');
const window = Dimensions.get('window');
const screen = Dimensions.get('screen');
class App extends Component {
state = {
dimensions: {
window,
screen,
windows
}
};
onChange = (
inWindow: ScaledSize,
inScreen: ScaledSize,
inWindows?: DisplayMetricsKepler[]
) => {
this.setState({
dimensions: { inWindow, inScreen, inWindows }
});
};
componentDidMount() {
// state.dimensions.windows may be empty at first,
// since it comes from the constants passed by
// the Dimensions module at launch, before a window
// was actually created. So we need to update here.
windows = Dimensions.get('windows');
this.setState({ dimensions: { window, screen, windows } });
this.dimensionsSubscription = Dimensions.addEventListener(
'change',
this.onChange
);
}
componentWillUnmount() {
this.dimensionsSubscription?.remove();
}
render() {
const {
dimensions: { window, screen, windows }
} = this.state;
return (
<View style={styles.container}>
<Text style={styles.header}>Window Dimensions</Text>
{Object.entries(window).map(([key, value]) => (
<Text>
{key} - {value}
</Text>
))}
<Text style={styles.header}>Screen Dimensions</Text>
{Object.entries(screen).map(([key, value]) => (
<Text>
{key} - {value}
</Text>
))}
<Text style={styles.header}>
Kepler Windows Dimensions
</Text>
{Platform.OS === 'kepler' &&
dimensions.windows &&
dimensions.windows.map((element, i) => (
<View key={i}>
<Text>Window module - {element.moduleName}</Text>
<Text>
Height - {element.height} Width - {element.width}
</Text>
</View>
))}
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center'
},
header: {
fontSize: 16,
marginVertical: 10
}
});
export default App;
Reference
Methods
addEventListener()
static addEventListener(
type: 'change',
handler: ({
window,
screen,
}: DimensionsValue) => void,
): EmitterSubscription;
Add an event handler. Supported events:
change: Fires when a property within theDimensionsobject changes. The argument to the event handler is aDimensionsValuetype object.
get()
static get(dim: 'window' | 'screen'): ScaledSize;
Initial dimensions are set before runApplication is called so they should be available before any other require's are run, but may be updated later.
Example: const {height, width} = Dimensions.get('window');
Vega example:
const windows = Dimensions.get('windows'); // get array of DisplayMetricsVega objects
const rootTag = useContext(RootTagContext);
let height = 0;
let width = 0;
windows.map((element) => <DisplayMetricsKepler>{
if (element.rootTag === rootTag) {
height = element.width;
width = element.height;
}
});
Parameters:
| Name | Type | Description |
|---|---|---|
| dim Required | string | Name of dimension as defined when calling set. Returns value for the dimension. |
window dimension will be reduced by the size of status bar (if not translucent) and bottom navigation bar.Type Definitions
DimensionsValue
Properties:
| Name | Type | Description |
|---|---|---|
| window | ScaledSize | Size of the visible Application window. |
| screen | ScaledSize | Size of the device's screen. |
| windows (Vega only) | DisplayMetrics | Array of DisplayMetrics objects with sizes for each app component's screen based on rootTag |
ScaledSize
| Type |
|---|
| object |
Properties:
| Name | Type |
|---|---|
| width | number |
| height | number |
| scale | number |
| fontScale | number |
Last updated: May 13, 2026
