Responsive dimensions (Dimensions API) in React Native - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the purpose of the Dimensions API in React Native?

The Dimensions API provides the width and height of the device screen or window, helping developers create layouts that adapt to different screen sizes.

beginner

How do you import the Dimensions API in a React Native component?

You import it using: <code>import { Dimensions } from 'react-native';</code>

beginner

What method do you use to get the screen width using the Dimensions API?

Use Dimensions.get('window').width to get the current width of the device's window.

beginner

Why is it better to use Dimensions API values instead of fixed numbers for width and height?

Because fixed numbers may not fit all screen sizes, using Dimensions API values makes your app layout flexible and responsive on different devices.

intermediate

How can you listen for screen size changes using the Dimensions API?

You can add an event listener with Dimensions.addEventListener('change', handler) to update your layout when the screen size changes, like on device rotation.

Which of these returns the height of the device screen in React Native?

A Dimensions.get('screen').width

B Dimensions.screen.height

C Dimensions.height

D Dimensions.get('window').height

Use Dimensions.get('window').height to get the current height of the device window.

What does the 'window' parameter in Dimensions.get('window') represent?

A The entire device screen including status bar

B The visible area available for your app excluding status bar

C The app's navigation bar size

D The keyboard height

'window' gives the visible area available for your app, excluding areas like the status bar.

How do you update your layout when the device orientation changes?

A Reload the app manually

B Use setTimeout to check screen size

C Use Dimensions.addEventListener('change', callback)

D Use fixed width and height values

Adding an event listener for 'change' lets you respond to screen size or orientation changes.

Which import statement is correct to use Dimensions API?

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

B import { Dimensions } from 'Dimensions';

C import Dimensions from 'Dimensions';

D import Dimensions from 'react-native';

You must import Dimensions as a named import from 'react-native'.

Why should you avoid using fixed pixel values for width and height in React Native?

A They do not adapt to different screen sizes

B They cause the app to crash

C They make the app slower

D They are harder to write

Fixed pixel values do not adapt to different screen sizes, making the app less responsive.

Explain how the Dimensions API helps create responsive layouts in React Native.

Think about how your app can know the device size and adjust automatically.

Describe the difference between 'window' and 'screen' in the Dimensions API.

Consider what parts of the screen your app can actually use.