Academy
easyReact Native#26

Flexbox layout: centered card

Prompt

Create a card that is centered vertically and horizontally on screen. The card should have a title, subtitle, and an action button at the bottom.

Solution

return (
  <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#f5f5f5' }}>
    <View style={{ backgroundColor: 'white', padding: 24, borderRadius: 12, shadowOpacity: 0.1, width: 300 }}>
      <Text style={{ fontSize: 20, fontWeight: 'bold' }}>Card Title</Text>
      <Text style={{ color: '#666', marginTop: 4 }}>Card subtitle here</Text>
      <View style={{ marginTop: 16 }}><Button title="Action" onPress={() => {}} /></View>
    </View>
  </View>
)
Mentor's take

Centering is the layout question because it forces you to show you know RN's flexbox is Yoga, not CSS — same vocabulary, different defaults, and the defaults are where cross-platform layout bugs are born. Three divergences matter: flexDirection defaults to column (web: row), every view is position: relative and flex by default, and there's no display: block fallback — everything is flexbox.

Decode the container line precisely. flex: 1 expands to flexGrow: 1, flexShrink: 1, flexBasis: 0 — the view ignores its content size and fills its parent's available space. Without it, the container hugs its content and "centered" quietly means "centered inside a card-sized box at the top of the screen" — the most common centering bug. Then, because the main axis is column by default, justifyContent: 'center' centers vertically (main axis) and alignItems: 'center' centers horizontally (cross axis) — the exact mirror of untweaked web flexbox, and saying which axis is which, unprompted, is the fluency signal.

The card itself needs no positioning: it's sized by width and padding, placed entirely by its parent — parent controls placement, child controls its own box.

Red flag: "it's the same flexbox as the web." The interviewer is checking whether the column-default has ever bitten you; name it before they ask.

Say it: "RN flexbox is Yoga with column as the default main axis — so justifyContent centers vertically, alignItems horizontally, and flex: 1 means grow-shrink-basis-zero: fill the parent regardless of content."