Default flexDirection and header-content-footer layout

WHAT THIS TESTS This checks that you remember React Native's flexbox default, which differs from the web, and that you can compose the most common screen skeleton correctly.

A GOOD ANSWER COVERS The default flexDirection in React Native is column, so children stack vertically by default, unlike the web where the default is row. For a header, scrollable content, and footer, you start with a root View styled flex 1 to fill the screen, with implicit column direction. The header View gets a fixed height. The footer View also gets a fixed height. The middle area gets flex 1 so it absorbs all remaining vertical space between header and footer regardless of screen size. To make it scroll, you use a ScrollView or FlatList for that middle region, giving the scroll component flex 1 so it occupies the gap, and when the inner content is shorter than the area you can use contentContainerStyle with flexGrow 1 to control alignment. This keeps header and footer pinned while only the middle scrolls.

COMMON WRONG ANSWERS Stating the default is row, which is the web default, not React Native's. Putting flex 1 directly on the ScrollView's contentContainerStyle, which can break scrolling because the content would be forced to the container height. Giving the middle a fixed height, defeating the fill-remaining-space goal.

LIKELY FOLLOW-UPS How do you keep header and footer visible while the keyboard appears? What is the difference between style and contentContainerStyle on a ScrollView? How would SafeAreaView fit in?

ONE CONCRETE EXAMPLE Root View flex 1; Header View height 56; a FlatList with style flex 1 as the middle; Footer View height 64. The list scrolls within its flexible region while header and footer remain fixed, and the layout adapts to any device height because only the middle uses flex 1.