Responsive dimensions (Dimensions API) in React Native - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

How does Dimensions.get('window') behave on device rotation?

In React Native, when you use Dimensions.get('window') to get screen width and height, what happens if the user rotates the device from portrait to landscape?

A The width and height values update only if you add an event listener for dimension changes.

B The width and height values stay the same until the app is restarted.

C The width and height values swap only if you call <code>Dimensions.get('screen')</code> instead.

D The width and height values update automatically to reflect the new orientation.

💡 Hint

Think about whether Dimensions.get returns live values or snapshots.

Dimensions.get('window') returns a snapshot of the screen size at the time of the call. It does not update automatically on rotation. To respond to orientation changes, you must listen to the change event from Dimensions.

🧠 Conceptual

intermediate

What is the difference between 'window' and 'screen' in Dimensions API?

In React Native's Dimensions API, what is the key difference between Dimensions.get('window') and Dimensions.get('screen')?

A <code>'window'</code> includes the entire physical screen, <code>'screen'</code> excludes safe areas.

B <code>'window'</code> updates on rotation, <code>'screen'</code> never changes.

C <code>'window'</code> returns the app's layout size, <code>'screen'</code> returns the device's pixel density.

D <code>'window'</code> excludes status bar and navigation bar areas, <code>'screen'</code> includes them.

💡 Hint

Think about what parts of the screen the app can draw on.

Dimensions.get('window') gives the size of the visible app area, excluding areas like the status bar or navigation bar. Dimensions.get('screen') gives the full device screen size including those areas.

📝 Syntax

advanced

Which code snippet correctly listens for dimension changes?

You want to update your React Native component when the screen size changes. Which code snippet correctly sets up and cleans up the listener using the Dimensions API?

React Native

import { useEffect } from 'react';
import { Dimensions } from 'react-native';

function MyComponent() {
  useEffect(() => {
    // Your code here
  }, []);
}

A

useEffect(() => {
  const subscription = Dimensions.addEventListener('change', ({ window }) => {
    console.log(window.width);
  });
  return () => subscription.remove();
}, []);

B

useEffect(() => {
  Dimensions.addEventListener('change', ({ window }) => {
    console.log(window.width);
  });
}, []);

C

useEffect(() => {
  const handler = ({ window }) => console.log(window.width);
  Dimensions.addEventListener('change', handler);
}, []);

D

useEffect(() => {
  const handler = ({ window }) => console.log(window.width);
  Dimensions.addEventListener('change', handler);
  return () => Dimensions.removeEventListener('change', handler);
}, []);

💡 Hint

Check how to properly remove listeners in modern React Native versions.

Since React Native 0.65, Dimensions.addEventListener returns a subscription object with a remove() method. You must call remove() in cleanup to avoid leaks.

❓ lifecycle

advanced

Why might your component not re-render on dimension change?

You added a Dimensions change listener to update your component's state on screen rotation, but the UI does not update. What is the most likely reason?

A Dimensions API does not support listening to changes on Android devices.

B You used <code>Dimensions.get('screen')</code> instead of <code>'window'</code> in the listener.

C You forgot to update the component's state inside the listener callback.

D You need to call <code>forceUpdate()</code> manually after dimension changes.

💡 Hint

Think about React's rendering mechanism and state updates.

React components re-render when their state or props change. If you listen to dimension changes but do not update state, React won't re-render the UI.

🔧 Debug

expert

What error occurs with this Dimensions listener code?

Consider this React Native code snippet:

useEffect(() => {
  const handler = ({ window }) => {
    setWidth(window.width);
  };
  Dimensions.addEventListener('change', handler);
  return () => Dimensions.removeEventListener('change', handler);
}, []);

What error or problem will this code cause in React Native 0.65+?

A Memory leak because the listener is never removed.

B TypeError because removeEventListener is not a function on Dimensions.

C No error; this is the correct way to add and remove listeners.

D SyntaxError due to incorrect arrow function usage.

💡 Hint

Check the updated API for adding/removing listeners in recent React Native versions.

Since React Native 0.65, Dimensions.addEventListener returns a subscription object with a remove() method. The old removeEventListener method no longer exists, so calling it causes a TypeError.