React Native · Mobile UI at native speed
How does Flexbox differ in React Native?
Short answer
React Native uses Yoga's Flexbox, with flexDirection defaulting to column instead of row. Flex values are simpler, and there is no display table or float layout.
Layout is Flexbox-only in React Native. Yoga implements the algorithm in C++ and runs it during layout, which is why you can rely on the same rules on both platforms. The big difference from the web is the default axis: flexDirection is column, so children stack vertically unless you set row.
import { View } from "react-native";
export function Toolbar() {
return (
<View style={{ flexDirection: "row", alignItems: "center", gap: 12 }}>
<View style={{ flex: 1, height: 40, backgroundColor: "#e5e7eb" }} />
<View style={{ width: 40, height: 40, backgroundColor: "#111827" }} />
</View>
);
}Practical rules
- flexDirection defaults to column, unlike the web
- flex: 1 means grow and shrink to fill available space
- alignItems controls the cross axis; justifyContent controls the main axis
- gap is supported and keeps spacing out of child styles
- Percentage sizes resolve against the parent, but text does not wrap without a width constraint
A common bug is a child with flex: 1 inside a parent that has no defined height. Flex needs a bounded container, so a ScrollView content container often needs flexGrow: 1 rather than flex: 1.
Follow-ups you should expect
Interviewers use these to check whether the first answer was understanding or memorisation.
- 1Why does flexDirection default to column?
- 2What is the difference between flex and flexGrow?
- 3How do you centre a child both vertically and horizontally?
- 4Why does flex: 1 sometimes collapse inside a ScrollView?
Say it in the interview
React Native uses Yoga's Flexbox for every layout, but the default direction is column rather than row. I use flex: 1 to fill remaining space, alignItems and justifyContent for alignment, and gap for spacing. The main trap is that flex needs a bounded parent, so inside a ScrollView I use flexGrow instead, otherwise content collapses.
Use this as a model, not a script. Saying it in your own words is what makes it survive follow-up pressure.
Related questions
Reading is step one
Now say it out loud.
Understanding an answer and delivering it under pressure are different skills. Rehearse this topic in a live React Native mock interview and get scored feedback on depth, clarity and confidence.