Layout with Flexbox

Relax. We'll talk through this in plain words — no textbook voice.

What you'll walk away with

Understand Layout with Flexbox, no need to be intimidated
Write code yourself and run it on Expo Go
Apply this concept immediately in a real app project

Let's think about this for a moment

In React Native, every View's default flexDirection is 'column' (the opposite of web CSS's 'row' default) — child components are arranged top to bottom by default. Switching to flexDirection: 'row' arranges them side by side. justifyContent controls spacing along the main axis (flex-start, center, space-between), while alignItems controls alignment along the cross axis (flex-start, center, stretch).

Let's connect this to a real scenario

To build a header bar (logo on the left, menu icon on the right), just add flexDirection: 'row', justifyContent: 'space-between' to the View's style — the two children automatically get pushed apart. Adding flex: 1 to a child component's style makes it take up the available space — if you want responsive behavior across different screen sizes, using flex is better than fixed width/height.

React Native's default flexDirection = column (opposite of the web's row)
justifyContent = main axis spacing, alignItems = cross axis alignment
flex: 1 = takes up available space (responsive layout)

Code Example

javascript

const styles = StyleSheet.create({
  header: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    padding: 16,
  },
  content: {
    flex: 1,           // remaining space ကို ယူ
    justifyContent: 'center',
    alignItems: 'center',
  },
});

You should see

You'll be able to build a header bar with flexDirection: row and arrange the logo/icon side by side.

5-Minute Try-It

Put 3 boxes inside a View with flexDirection: 'row' and try justifyContent with 'flex-start', 'center', and 'space-between'.

A Quick Heads-Up

flex: 1 might not work if the parent container doesn't have a defined height (the root View needs flex: 1 too) — pay attention to the parent-child flex chain.

Easy traps

Assuming web CSS's default flexDirection: row and getting the layout wrong in React Native (where the default is column)
Relying only on fixed width/height and ignoring flex: 1 — layout can break on devices with different screen sizes

Now Try It Yourself

Put 3 boxes inside a View with flexDirection: 'row' and try justifyContent with 'flex-start', 'center', and 'space-between'.

You'll know it worked when: You'll be able to build a header bar with flexDirection: row and arrange the logo/icon side by side.