Design Like a Pro: React Native Style Properties You Can’t Ignore 🚀

Photo by Alexander Andrews on Unsplash

In this article we will learn about the important styles property that you must know in React Native.

1️⃣ The Shape Shifter — flex

📌 What it does?
Defines how a component should grow or shrink to fill available space.

📌 Usage:

• flex: 1 → Expands to take up all available space.
• flex: 0.5 → Takes up half the space.

📌 Example:

<View style={{ flex: 1, backgroundColor: 'blue' }} />

2️⃣ Align It Right — alignItems

📌 What it does?
Aligns child elements along the cross-axis.

📌 Values:

• flex-start → Aligns children to the start.
• center → Aligns children in the middle.
• flex-end → Aligns children at the end.
• stretch → Stretches children to fill.

📌 Example:

<View style={{ alignItems: 'center' }}>
  <Text>Hello!</Text>
</View>

3️⃣ Spread Out — justifyContent