Screen Size in React Native: Two Approaches

This post is inspired by the ReactNative course – React Native – The Practical Guide [2025]

React Native provides two main ways to access device screen size and orientation: the Dimensions API and the useWindowDimensions hook. Both are useful for building responsive UIs, but they have different usage patterns and trade offs.

Dimensions API

Usage

import { Dimensions } from 'react-native';

const { width, height } = Dimensions.get('window');

You can also listen for changes:

Dimensions.addEventListener('change', handler);

Pros

• Works outside components: Can be used anywhere, even outside React components.
• Static access: Useful for one-time reads (e.g., at app startup).
• Event listener: Can subscribe to dimension changes (e.g., orientation changes).

Cons

• Deprecated event API: The addEventListener method is deprecated in newer React Native versions; you should use hooks for reactivity.
• Not reactive: Does not automatically update your component when dimensions change unless you use the event listener and manage state manually.

useWindowDimensions Hook

Usage

import { useWindowDimensions } from 'react-native';

function MyComponent() {
  const { width, height } = useWindowDimensions();
  // ...use width/height directly in render
}

Pros

• Reactive: Automatically updates your component when the window size changes (e.g., device rotation, split-screen).
• Simpler code: No need to manually subscribe/unsubscribe to events.
• Recommended for functional components: Integrates naturally with React hooks.

Cons

• Only inside components: Can only be used within function components or custom hooks.
• No static access: Not available outside the React render tree.

When to Use Which?

• For most UI logic: Prefer useWindowDimensions for responsive layouts in function components.
• For static or global logic: Use Dimensions.get() if you need the value outside components (e.g., in config files).
• For class components: Use Dimensions with event listeners, but consider refactoring to hooks if possible.

Summary Table

Let’s take a look at few examples of using both Dimensions and useWindowDimensions to set styles in a React Native StyleSheet:

Using Dimensions API

import { StyleSheet, Dimensions } from 'react-native';

const { width, height } = Dimensions.get('window');

const styles = StyleSheet.create({
  container: {
    width: width * 0.9,
    height: height * 0.5,
    backgroundColor: 'lightblue',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Using useWindowDimensions Hook

import React from 'react';
import { View, StyleSheet, useWindowDimensions } from 'react-native';

export default function MyComponent() {
  const { width, height } = useWindowDimensions();

  return (
    <View
      style={[
        styles.container,
        { width: width * 0.9, height: height * 0.5 }
      ]}
    >
      {/* ...app content... */}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: 'lightgreen',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

For modern React Native apps, useWindowDimensions is the preferred way to handle screen size changes in components, thanks to its simplicity and reactivity.

Use Dimensions only when you need access outside the component tree or in legacy code.

Cheers!