In this lesson, you will learn how to orient your mobile components by mastering the relationship between the main axis and the cross axis.
When you start building interfaces in React Native, the most important mental shift is understanding that everything inside a View acts like a flow. By default, React Native uses flexDirection: 'column', which sets the main axis to run vertically (top-to-bottom) and the cross axis to run horizontally (left-to-right).
The Main Axis: The Flow Direction
Think of the main axis as the "primary path" where your items stack. Because mobile screens are narrow and tall, we usually design for a vertical flow. When you add justifyContent to a container, you are telling React Native how to distribute items along this vertical main axis. Whether you want them bunched at the top (flex-start) or spaced out evenly (space-between), you are manipulating the main path.
The Cross Axis: The Perpendicular Path
The cross axis is always at a 90-degree angle to your main axis. In our default vertical setup, the cross axis is the horizontal line. We control this using alignItems. This property dictates how your items behave across the width of the container—for example, centering them horizontally or stretching them to fill the full width.
Consider this simple layout:
<View style={{ flexDirection: 'column', height: 400 }}>
{/* The main axis is vertical. justifyContent moves items up/down. */}
{/* The cross axis is horizontal. alignItems moves items left/right. */}
<View style={{ width: 50, height: 50, backgroundColor: 'blue' }} />
<View style={{ width: 50, height: 50, backgroundColor: 'red' }} />
</View>
If you decide to switch your flexDirection to 'row', the axes flip: the main axis becomes horizontal, and the cross axis becomes vertical. Mastering this flip allows you to create complex, responsive UIs that adapt to any screen size without needing manual positioning.
Key Takeaway: The main axis dictates the primary flow of your items, while the cross axis controls their perpendicular alignment; always identify your flexDirection first to know which axis you are manipulating.