Flexbox Layout

Flexbox is how you arrange things on screen in React Native — centering content, creating rows and columns, adding space between items. It is the one and only layout tool you need to learn.

<View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
  <Text>Perfectly centered</Text>
</View>

Key differences from web CSS

Property	Web default	React Native default
flexDirection	row	column
alignContent	stretch	flex-start
Units	px, rem, %, etc.	Unitless numbers

Understanding the axes

Main axis = the direction children are laid out. In React Native, the default is column (vertical, top to bottom). Set flexDirection: "row" to go horizontal.

Cross axis = the other direction. If main axis is vertical, cross axis is horizontal, and vice versa.

justifyContent controls spacing along the main axis. alignItems controls alignment along the cross axis.

The essential properties

Container properties (on the parent View):

<View
  style={{
    flex: 1, // Take all available space
    flexDirection: "row", // Lay out children horizontally
    justifyContent: "space-between", // Space along main axis
    alignItems: "center", // Align along cross axis
    gap: 12, // Space between children
  }}
>
  <Text>Left</Text>
  <Text>Right</Text>
</View>

Child properties:

<View style={{ flex: 1 }}>   {/* Takes 1/3 of space */}</View>
<View style={{ flex: 2 }}>   {/* Takes 2/3 of space */}</View>

Common layouts

// Centered content
{ flex: 1, justifyContent: "center", alignItems: "center" }

// Header + content + footer
<View style={{ flex: 1 }}>
  <View style={{ height: 60 }}><Text>Header</Text></View>
  <View style={{ flex: 1 }}><Text>Content</Text></View>
  <View style={{ height: 60 }}><Text>Footer</Text></View>
</View>

Try this: Create a row of three colored boxes that share the space equally using flex: 1 on each.