Dimensions

Respond to changes in the viewport dimensions.

Dimensions may change (e.g., due to device rotation) 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.

import { Dimensions } from 'react-native';

API

Static methods

get (string: "window" | "screen") => Dimension

Get a dimension (e.g., window or screen).

set (dimensions: { window: Dimension, screen: Dimension }) => void

This should only be called server-side with an estimate for initial dimensions to be used when pre-rendering pages on the server.

addEventListener (type: ?string, listener: (dimensions) => void) => ?EmitterSubscription

Add a listener to Dimensions changes. Listen to the "change" event type. The handler is called with the dimensions state.

removeEventListener (type: ?string, listener: (dimensions) => void) => void

Remove a listener from Dimensions changes.

Dimension

height number

The height of the dimension.

width number

The width of the dimension.


Examples

Updated
Edit
React Native for WebCopyright © Nicolas Gallagher and Meta Platforms, Inc.