React Native React Native Styling & Layout 2

Question 1

What does `flex: 1` do when applied to a component in React Native?

Accepted Answer

Makes the component expand to fill all available space

Answer

`flex: 1` causes a component to grow and fill all remaining space in its flex container.

Question 2

How do you specify a percentage-based width in React Native?

Accepted Answer

width: '50%'

Answer

React Native supports string percentage values (e.g., `'50%'`) which are relative to the parent container's dimension.

Question 3

What is `StyleSheet.hairlineWidth` in React Native?

Accepted Answer

The thinnest line the device can render

Answer

`StyleSheet.hairlineWidth` returns the smallest line width the device's screen can display, which can be less than 1pt on high-DPI screens.

Question 4

Which property allows flex children to wrap onto multiple lines when they overflow the container?

Accepted Answer

flexWrap

Answer

Setting `flexWrap: 'wrap'` allows flex items to wrap onto a new line when they exceed the container's main-axis size.

Question 5

What does `overflow: 'hidden'` do in React Native?

Accepted Answer

Clips child content that extends beyond the component's bounds

Answer

`overflow: 'hidden'` clips any child content that renders outside the component's boundaries.

React Native Practice Test