React Native React Native Styling & Layout 2 — Questions and Answers
Question 1: What does `flex: 1` do when applied to a component in React Native?
- Sets the component's opacity to 1
- Makes the component expand to fill all available space (Correct answer)
- Sets the component as the first child
- Limits the component to 1% of the screen
Correct answer: Makes the component expand to fill all available space
`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?
- width: 50
- width: '50%' (Correct answer)
- width: 0.5
- width: percent(50)
Correct answer: width: '50%'
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?
- A fixed 1px border width
- The thinnest line the device can render (Correct answer)
- A bold border width constant
- A standard divider width
Correct answer: The thinnest line the device can render
`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?
- overflow
- flexWrap (Correct answer)
- flexFlow
- wrapContent
Correct answer: flexWrap
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?
- Makes the component invisible
- Clips child content that extends beyond the component's bounds (Correct answer)
- Prevents all touch events on the component
- Hides the component from the accessibility tree
Correct answer: Clips child content that extends beyond the component's bounds
`overflow: 'hidden'` clips any child content that renders outside the component's boundaries.
Question 6: What is the default value of `position` in React Native?
- absolute
- fixed
- relative (Correct answer)
- static
Correct answer: relative
React Native defaults to `position: 'relative'`, which keeps components in the normal layout flow while allowing offset adjustments.
Question 7: Which property defines the space between a component's border and its inner children/content?
- margin
- padding (Correct answer)
- gap
- inset
Correct answer: padding
`padding` defines the internal spacing between a component's border and its inner content, pushing children inward.
React Native React Native Styling & Layout 2
What does `flex: 1` do when applied to a component in React Native?