React Native React Native Styling & Layout 3

Question 1

Which React hook provides the current window dimensions and updates automatically on screen rotation in React Native?

Accepted Answer

useWindowDimensions()

Answer

`useWindowDimensions()` is a built-in hook that returns `{ width, height }` and re-renders the component when dimensions change.

Question 2

How can you apply platform-specific styles in React Native?

Accepted Answer

Using Platform.select() or platform-specific file extensions (.ios.js/.android.js)

Answer

`Platform.select()` returns the appropriate value based on the current OS, and `.ios.js`/`.android.js` files allow entirely separate implementations.

Question 3

What does `Dimensions.get('window')` return in React Native?

Accepted Answer

The app window's width and height in density-independent pixels

Answer

`Dimensions.get('window')` returns `{ width, height }` representing the app's drawable area in density-independent pixels.

Question 4

How do you create a perfectly circular component in React Native?

Accepted Answer

Set borderRadius to half of the equal width and height values

Answer

Setting `borderRadius` to exactly half the value of equal `width` and `height` rounds all corners into a circle.

Question 5

What is the purpose of `StyleSheet.flatten()` in React Native?

Accepted Answer

To merge a style array or registered StyleSheet ID into a plain style object

Answer

`StyleSheet.flatten()` converts a style array or a registered StyleSheet reference into a single merged plain JavaScript object.

React Native Practice Test