React Native React Native Styling & Layout 1 — Questions and Answers
Question 1: What is the default value of `flexDirection` in React Native?
- row
- column (Correct answer)
- row-reverse
- column-reverse
Correct answer: column
React Native defaults `flexDirection` to `column`, unlike web CSS which defaults to `row`.
Question 2: Which method is used to create optimized, validated style objects in React Native?
- StyleSheet.create() (Correct answer)
- StyleSheet.new()
- StyleSheet.define()
- StyleSheet.build()
Correct answer: StyleSheet.create()
`StyleSheet.create()` validates style props at development time and registers styles for performance optimization.
Question 3: What unit does React Native use by default for dimension values like width and height?
- Pixels (px)
- Density-independent pixels (dp) (Correct answer)
- Points (pt)
- Viewport units (vw/vh)
Correct answer: Density-independent pixels (dp)
React Native uses density-independent pixels so layouts appear consistent across devices with different screen densities.
Question 4: Which flex property controls alignment of children along the main axis in React Native?
- alignItems
- justifyContent (Correct answer)
- alignSelf
- alignContent
Correct answer: justifyContent
`justifyContent` positions flex children along the main axis (determined by `flexDirection`).
Question 5: How do you apply multiple styles to a single component in React Native?
- style="style1 style2"
- style={[style1, style2]} (Correct answer)
- style={StyleSheet.combine(style1, style2)}
- style={style1.merge(style2)}
Correct answer: style={[style1, style2]}
Passing an array of style objects merges them from left to right, with later styles overriding earlier ones.
Question 6: What does `alignItems` control in a React Native flex container?
- Alignment along the main axis
- Alignment along the cross axis (Correct answer)
- Space between items
- Item wrapping behavior
Correct answer: Alignment along the cross axis
`alignItems` positions flex children along the cross axis, which is perpendicular to the `flexDirection`.
Question 7: Which `position` value removes a component from the normal layout flow and positions it relative to its parent in React Native?
- static
- fixed
- relative
- absolute (Correct answer)
Correct answer: absolute
`position: 'absolute'` takes the component out of the normal flow and uses `top`/`left`/`right`/`bottom` offsets relative to its nearest parent.
React Native React Native Styling & Layout 1
What is the default value of `flexDirection` in React Native?