React Native Basics›Core· 40 min read

Layout with Flexbox

Flexbox arranges everything — and in React Native items stack vertically by default.

What you will learn

Use flexDirection to stack or line up items
Center things with justifyContent and alignItems
Make a View fill the screen with flex: 1

Flexbox is the layout system

React Native uses flexbox for all layout — the same idea you may have met in CSS. The one surprise: the default direction is column (top to bottom), not row. Phones are tall, so this makes sense.

Property	What it does
`flexDirection`	`'column'` (default, stacks down) or `'row'` (side by side)
`justifyContent`	Spacing along the main direction
`alignItems`	Position across the other direction
`flex: 1`	Grow to fill the available space

Center something on the screen

A very common need: fill the whole screen and center the content. flex: 1 makes the box take all the space, then the two align properties center the child:

flex: 1 plus the two align properties center content on screen

import { View, Text, StyleSheet } from 'react-native';

export default function App() {
  return (
    <View style={styles.screen}>
      <Text>I am centered!</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  screen: {
    flex: 1,                 // fill the whole screen
    justifyContent: 'center',// center vertically (main axis)
    alignItems: 'center',    // center horizontally (cross axis)
  },
});

Note: Output: The words "I am centered!" sit exactly in the middle of the screen. Because the default direction is column, justifyContent controls the vertical position and alignItems controls the horizontal one.

Put items in a row

Switch flexDirection to 'row' to lay things side by side — perfect for a toolbar or a row of buttons.

flexDirection row spreads two items across

<View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
  <Text>Left</Text>
  <Text>Right</Text>
</View>

Note: Output: Left Right space-between pushes the first item to the start and the last to the end, with the gap in the middle.

Tip: Remember the swap from CSS: in React Native flexDirection is column by default. If your row looks like a stack, you probably forgot flexDirection: 'row'.

Q. What is the default flexDirection in React Native?

Answer: Unlike the web, React Native defaults to column, so children stack vertically until you set flexDirection: 'row'.

✍️ Practice

Center a single Text in the middle of the screen using flex: 1.
Make a row with three items spaced out using flexDirection: 'row' and justifyContent: 'space-around'.

🏠 Homework

Build a simple header: a row with a title on the left and a small Text "Menu" on the right, spaced apart.