Dimensions

Respond to changes in the viewport dimensions.

TV relevance: Baseline React Native Web API. Frequently used in TV layouts for viewport-aware sizing.

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

  For TV Examples: LRUD navigation is already enabled in this sandbox. Use your keyboard arrow keys to move focus.

Updated
React Native Web for TV – Portions Copyright © Nicolas Gallagher, Meta Platforms, Inc., Facebook, Inc. and affiliates, and other contributors as noted in file headers and THIRD_PARTY_NOTICES.md. Modifications and TV extensions Copyright © Harpreet Singh and contributors.