Dimensions
import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
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: useKeplerWindowDimensions
is the preferred API for React Native for Kepler applications. Unlike useWindowDimensions
, it updates when any application component's window dimension update.
useKeplerWindowDimensionsV2
use 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 Kepler 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);
}
}
};
DisplayMetricsKepler Type:
/**
* Kepler window Dimensions
* @platform kepler
*/
export interface DisplayMetricsKepler {
width: number;
height: number;
scale: number;
fontScale: number;
moduleName: string;
}
If your React Native for Kepler 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 Kepler app component, Dimensions.get('window') returns dimensions for the first component created in the app process.
Although dimensions are available immediately, they may change (e.g due to device rotation, foldable devices etc) so any rendering logic or styles that depend on these constants should try to call this function on every render, rather than caching the value (for example, using inline styles rather than setting a value in a
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 below example.
Example Kepler
import React, {useState, useEffect} from 'react';
import {View, StyleSheet, Text, Dimensions} from 'react-native';
const windowDimensions = Dimensions.get('window');
const screenDimensions = Dimensions.get('screen');
const App = () => {
const [dimensions, setDimensions] = useState({
window: windowDimensions,
screen: screenDimensions,
});
useEffect(() => {
const handleChange = (newDimensions) => {
if (dimensions !== newDimensions) {
setDimensions(newDimensions);
}
}
const subscription = NativeDeviceInfo.addListenerV2(rootTag, 'didUpdateDimensions', handleChange);
return () => subscription?.remove();
});
return (
<View 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>
))}
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
header: {
fontSize: 16,
marginVertical: 10,
},
});
export default App;
Reference
Methods
addEventListener
Deprecated: Use addEventListenerV2()
instead.
static addEventListener(
type: 'change',
handler: ({
window,
screen,
}: DimensionsValue) => void,
): EmitterSubscription;
Add an event handler. Supported events:
change
: Fires when a property within theDimensions
object changes. The argument to the event handler is aDimensionsValue
type object.
addEventListenerV2
addEventListenerV2(
type: 'didUpdateDimensions',
handler: ({
dimensions
}: {
dimensions: DisplayMetrics;
}) => void,
): EmitterSubscription;
}
Add an event handler.
addEventListenerV2
is based on root tag which supports multiple instances and multiple interactive components.
Supported events:
didUpdateDimensions
: Fires when a property within the Dimensions object changes. The argument to the event handler is a DimensionsValue type 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');
Kepler example:
const windows = Dimensions.get('windows'); // get array of DisplayMetricsKepler 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 the value for the dimension. |
Type Definitions
DimensionsValue
Properties:
Name | Type | Description |
---|---|---|
window | ScaledSize | Size of the visible Application window. |
screen | ScaledSize | Size of the device's screen. |
windows - (Kepler 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: Sep 30, 2025