Mamun Labs Learn
JourneyGlossary
esc
  • Try “map”, “flexbox” or “state”.
Log in
Start learning
Phase 6 · 4 / 10Styling and flexbox on mobile
Phase 6React Native with Expo
10 topics · 6–8 wks
  1. 1Your first Expo app
  2. 2View, Text and Image
  3. 3Pressable and TextInput
  4. 4Styling and flexbox on mobile
  5. 5Lists with FlatList
  6. 6Safe areas and the keyboard
  7. 7Screens and navigation
  8. 8Tabs
  9. 9Saving data on the phone
  10. 10Calling an API
JourneyPhase 6Styling and flexbox on mobile
01 / 10Overview

Styling and flexbox on mobile

You'll learn how styles work in React Native and how flexbox places boxes on a phone screen.

Why it mattersEvery row, card and button in your habit tracker is placed with a few flexbox styles.
about 90 min·needs: View, Text and Image, Layout with flexbox
02 / 10

Watch & read

Start with the required ones. The others are there when you need them.

Docs
Layout with flexboxreactnative.dev · official docs · 25 min · English
MMamun's noteRead the top part about how React Native's defaults differ from the web (column, not row). Then play with the live examples for Flex, Flex direction, Justify content and Align items. Skip Flex wrap, Align content and Absolute layout for now.
Video
Complete React Native tutorial #2: Text, View and Image componentsYouTube · Net Ninja · 6 min · English
MMamun's noteWatch 4:04–10:11. He makes a StyleSheet, uses flex: 1 and alignItems, says out loud that the default direction is column, and styles a card with padding and borderRadius. You saw the start of this video in the last topic.
DocsOptional
Stylereactnative.dev · official docs · 5 min · English
MMamun's noteA short page. Read it for the camelCase names and the style array, where the last style in the list wins.
VideoOptional
React Native crash course 2026YouTube · Traversy Media · 2 min · English
MMamun's noteTwo minutes, 28:25–30:38. Brad shows inline styles first and then why StyleSheet.create is tidier when you have many components.
03 / 10

See it step by step

Change one style at a time and watch the boxes move on the phone.

flexDirection"column (default)"
justifyContent"flex-start (default)"
alignItems"flex-start"
Screen|[A] ||[B] ||[C] || || || || |
App.jsx
1const styles = StyleSheet.create({
2 screen: {
3 flex: 1,
4 alignItems: "flex-start",
5 },
6});
flex: 1 makes the screen View fill the whole phone. It holds three boxes, A, B and C. No other style yet, so you get the defaults.
Step 1 / 7
04 / 10

Explanation

You want each habit to be one row: a tick box on the left, the name next to it, and the streak pushed to the right edge. You already know flexbox from CSS. On a phone it is the same idea with three changes.

1. Styles are JavaScript objects. Names are written in camelCase: background-color becomes backgroundColor, font-size becomes fontSize. Sizes are plain numbers with no px. React Native scales them so a box looks the same size on a small and a big phone.

const styles = StyleSheet.create({
  row: { flexDirection: "row", justifyContent: "space-between", alignItems: "center", padding: 12 },
  name: { color: "white", fontSize: 18 },
});
 
<View style={styles.row}>...</View>

2. Every View is already a flex container. There is no display: flex to write.

3. The default direction is column. Boxes stack top to bottom unless you say flexDirection: "row". So on a phone justifyContent moves things up and down, and alignItems moves them left and right, until you switch to a row. Think of a class register: names go down the page. You only get a row when you ask for one.

flex: 1 means "take all the space that's left". Put it on the screen's outer View so it fills the phone. style can also take a list, and later items win: style={[styles.name, habit.done && styles.doneName]}. That is how one habit turns grey when it's done.

People often write justifyContent: "center" and expect the boxes to move to the middle, left to right. In a column it moves them to the vertical middle. Check the direction first. The other common one is CSS habits: "16px" or background-color don't work. Write 16 and backgroundColor.

When you read a style, find flexDirection first (no value means column). Draw an arrow for it. Then justifyContent is "along the arrow" and alignItems is "across the arrow", the same as in Phase 1.

Words to recognise
StyleSheet.createcamelCaseflex: 1flexDirectionjustifyContentalignItems
05 / 10

Code tour

Click a line number with a ring to read the note for that line.

src/components/HabitRow.jsx5 notes
1import { StyleSheet, Text, View } from "react-native";
2export default function HabitRow({ habit }) {
3 return (
4 <View style={styles.row}>
<Text style={[styles.name, habit.done && styles.done]}>{habit.name}</Text>
Mentor note · line 5
A style list. If habit.done is true, done is added after name and its colour wins. If false, false is simply skipped.
6 <Text style={styles.streak}>{habit.streak} days</Text>
7 </View>
8 );
9}
10
const styles = StyleSheet.create({
row: { flexDirection: "row", justifyContent: "space-between", alignItems: "center", padding: 12 },
name: { fontSize: 18, color: "#EDEDF0" },
done: { color: "#8A8A93", textDecorationLine: "line-through" },
15 streak: { fontSize: 14, color: "#C6F432" },
16});
06 / 10

Practice

Short drills. Take your time and read the code before you answer.

DrillPredict1 / 2
1export default function App() {
2  return (
3    <View style={{ flex: 1, justifyContent: "center" }}>
4      <View style={{ width: 60, height: 60, backgroundColor: "red" }} />
5      <View style={{ width: 60, height: 60, backgroundColor: "green" }} />
6      <View style={{ width: 60, height: 60, backgroundColor: "blue" }} />
7    </View>
8  );
9}
Which way do the boxes line up?
DrillTurn each habit into a row2 / 2
Right now each habit's name and streak stack on top of each other. Change only the styles so each habit is one row: name on the left, streak on the right edge, both lined up in the middle.
1import { StyleSheet, Text, View } from "react-native";
2 
3const habits = [
4  { id: "1", name: "Drink water", streak: 5 },
5  { id: "2", name: "Read 10 pages", streak: 2 },
6  { id: "3", name: "Walk 20 minutes", streak: 12 },

Runs in the browser. Choose “My Device” in Snack to try it on your phone with Expo Go.

Working whenEach habit's name and streak sit side by side on one line.The streak is pushed to the right edge of its card.The small streak text lines up with the middle of the bigger name, not the top.
Check each goal yourself, then mark it.
07 / 10

Quick check

3 questions. Each one explains itself after you answer.

  1. 1 / 3A View has no flexDirection. How do its children line up?
  2. 2 / 3A screen View has flex: 1 and justifyContent: "center", and nothing else. Where do its children go?
  3. 3 / 3Which style is written correctly for React Native?
08 / 10

Explain it back

Only you can see this. Log in to keep it.0 words
09 / 10

How confident are you with Styling and flexbox on mobile?

10 / 10

Done

You can now
Read a StyleSheet and sketch where each box lands on the phone.
Next: Lists with FlatList Back to Phase 6
On this page
  1. 01Styling and flexbox on mobile
  2. 02Watch & read
  3. 03See it step by step
  4. 04Explanation
  5. 05Code tour
  6. 06Practice
  7. 07Quick check
  8. 08Explain it back
  9. 09Confidence
  10. 10Done
Up next · 02 / 10Watch & read
Mamun Labs LearnFound a mistake on this page? Tell Mamun.
Mamun Labs Learn
JourneyGlossary
esc
  • Try “map”, “flexbox” or “state”.
Log in
Start learning
Log in to save your progress. Everything here works without an account.Log in to save progressLog in
Phase 6React Native with Expo
10 topics · 6–8 wks
  1. 1Your first Expo app
  2. 2View, Text and Image
  3. 3Pressable and TextInput
  4. 4Styling and flexbox on mobile
  5. 5Lists with FlatList
  6. 6Safe areas and the keyboard
  7. 7Screens and navigation
  8. 8Tabs
  9. 9Saving data on the phone
  10. 10Calling an API
JourneyPhase 6Styling and flexbox on mobile
01 / 10Overview

Styling and flexbox on mobile

You'll learn how styles work in React Native and how flexbox places boxes on a phone screen.

Why it mattersEvery row, card and button in your habit tracker is placed with a few flexbox styles.
about 90 min·needs: View, Text and Image, Layout with flexbox
02 / 10

Watch & read

Start with the required ones. The others are there when you need them.

Docs
Layout with flexboxreactnative.dev · official docs · 25 min · English
MMamun's noteRead the top part about how React Native's defaults differ from the web (column, not row). Then play with the live examples for Flex, Flex direction, Justify content and Align items. Skip Flex wrap, Align content and Absolute layout for now.
Video
Complete React Native tutorial #2: Text, View and Image componentsYouTube · Net Ninja · 6 min · English
MMamun's noteWatch 4:04–10:11. He makes a StyleSheet, uses flex: 1 and alignItems, says out loud that the default direction is column, and styles a card with padding and borderRadius. You saw the start of this video in the last topic.
DocsOptional
Stylereactnative.dev · official docs · 5 min · English
MMamun's noteA short page. Read it for the camelCase names and the style array, where the last style in the list wins.
VideoOptional
React Native crash course 2026YouTube · Traversy Media · 2 min · English
MMamun's noteTwo minutes, 28:25–30:38. Brad shows inline styles first and then why StyleSheet.create is tidier when you have many components.
03 / 10

See it step by step

Change one style at a time and watch the boxes move on the phone.

flexDirection"column (default)"
justifyContent"flex-start (default)"
alignItems"flex-start"
Screen|[A] ||[B] ||[C] || || || || |
App.jsx
1const styles = StyleSheet.create({
2 screen: {
3 flex: 1,
4 alignItems: "flex-start",
5 },
6});
flex: 1 makes the screen View fill the whole phone. It holds three boxes, A, B and C. No other style yet, so you get the defaults.
Step 1 / 7
04 / 10

Explanation

You want each habit to be one row: a tick box on the left, the name next to it, and the streak pushed to the right edge. You already know flexbox from CSS. On a phone it is the same idea with three changes.

1. Styles are JavaScript objects. Names are written in camelCase: background-color becomes backgroundColor, font-size becomes fontSize. Sizes are plain numbers with no px. React Native scales them so a box looks the same size on a small and a big phone.

const styles = StyleSheet.create({
  row: { flexDirection: "row", justifyContent: "space-between", alignItems: "center", padding: 12 },
  name: { color: "white", fontSize: 18 },
});
 
<View style={styles.row}>...</View>

2. Every View is already a flex container. There is no display: flex to write.

3. The default direction is column. Boxes stack top to bottom unless you say flexDirection: "row". So on a phone justifyContent moves things up and down, and alignItems moves them left and right, until you switch to a row. Think of a class register: names go down the page. You only get a row when you ask for one.

flex: 1 means "take all the space that's left". Put it on the screen's outer View so it fills the phone. style can also take a list, and later items win: style={[styles.name, habit.done && styles.doneName]}. That is how one habit turns grey when it's done.

People often write justifyContent: "center" and expect the boxes to move to the middle, left to right. In a column it moves them to the vertical middle. Check the direction first. The other common one is CSS habits: "16px" or background-color don't work. Write 16 and backgroundColor.

When you read a style, find flexDirection first (no value means column). Draw an arrow for it. Then justifyContent is "along the arrow" and alignItems is "across the arrow", the same as in Phase 1.

Words to recognise
StyleSheet.createcamelCaseflex: 1flexDirectionjustifyContentalignItems
05 / 10

Code tour

Click a line number with a ring to read the note for that line.

src/components/HabitRow.jsx5 notes
1import { StyleSheet, Text, View } from "react-native";
2export default function HabitRow({ habit }) {
3 return (
4 <View style={styles.row}>
<Text style={[styles.name, habit.done && styles.done]}>{habit.name}</Text>
Mentor note · line 5
A style list. If habit.done is true, done is added after name and its colour wins. If false, false is simply skipped.
6 <Text style={styles.streak}>{habit.streak} days</Text>
7 </View>
8 );
9}
10
const styles = StyleSheet.create({
row: { flexDirection: "row", justifyContent: "space-between", alignItems: "center", padding: 12 },
name: { fontSize: 18, color: "#EDEDF0" },
done: { color: "#8A8A93", textDecorationLine: "line-through" },
15 streak: { fontSize: 14, color: "#C6F432" },
16});
06 / 10

Practice

Short drills. Take your time and read the code before you answer.

DrillPredict1 / 2
1export default function App() {
2  return (
3    <View style={{ flex: 1, justifyContent: "center" }}>
4      <View style={{ width: 60, height: 60, backgroundColor: "red" }} />
5      <View style={{ width: 60, height: 60, backgroundColor: "green" }} />
6      <View style={{ width: 60, height: 60, backgroundColor: "blue" }} />
7    </View>
8  );
9}
Which way do the boxes line up?
DrillTurn each habit into a row2 / 2
Right now each habit's name and streak stack on top of each other. Change only the styles so each habit is one row: name on the left, streak on the right edge, both lined up in the middle.
1import { StyleSheet, Text, View } from "react-native";
2 
3const habits = [
4  { id: "1", name: "Drink water", streak: 5 },
5  { id: "2", name: "Read 10 pages", streak: 2 },
6  { id: "3", name: "Walk 20 minutes", streak: 12 },

Runs in the browser. Choose “My Device” in Snack to try it on your phone with Expo Go.

Working whenEach habit's name and streak sit side by side on one line.The streak is pushed to the right edge of its card.The small streak text lines up with the middle of the bigger name, not the top.
Check each goal yourself, then mark it.
07 / 10

Quick check

3 questions. Each one explains itself after you answer.

  1. 1 / 3A View has no flexDirection. How do its children line up?
  2. 2 / 3A screen View has flex: 1 and justifyContent: "center", and nothing else. Where do its children go?
  3. 3 / 3Which style is written correctly for React Native?
08 / 10

Explain it back

Only you can see this. Log in to keep it.0 words
09 / 10

How confident are you with Styling and flexbox on mobile?

10 / 10

Done

You can now
Read a StyleSheet and sketch where each box lands on the phone.
Next: Lists with FlatList Back to Phase 6
On this page
  1. 01Styling and flexbox on mobile
  2. 02Watch & read
  3. 03See it step by step
  4. 04Explanation
  5. 05Code tour
  6. 06Practice
  7. 07Quick check
  8. 08Explain it back
  9. 09Confidence
  10. 10Done
Up next · 02 / 10Watch & read

You want each habit to be one row: a tick box on the left, the name next to it, and the streak pushed to the right edge. You already know flexbox from CSS. On a phone it is the same idea with three changes.

1. Styles are JavaScript objects. Names are written in camelCase: background-color becomes backgroundColor, font-size becomes fontSize. Sizes are plain numbers with no px. React Native scales them so a box looks the same size on a small and a big phone.

const styles = StyleSheet.create({
  row: { flexDirection: "row", justifyContent: "space-between", alignItems: "center", padding: 12 },
  name: { color: "white", fontSize: 18 },
});
 
<View style={styles.row}>...</View>

2. Every View is already a flex container. There is no display: flex to write.

3. The default direction is column. Boxes stack top to bottom unless you say flexDirection: "row". So on a phone justifyContent moves things up and down, and alignItems moves them left and right, until you switch to a row. Think of a class register: names go down the page. You only get a row when you ask for one.

flex: 1 means "take all the space that's left". Put it on the screen's outer View so it fills the phone. style can also take a list, and later items win: style={[styles.name, habit.done && styles.doneName]}. That is how one habit turns grey when it's done.

People often write justifyContent: "center" and expect the boxes to move to the middle, left to right. In a column it moves them to the vertical middle. Check the direction first. The other common one is CSS habits: "16px" or background-color don't work. Write 16 and backgroundColor.

When you read a style, find flexDirection first (no value means column). Draw an arrow for it. Then justifyContent is "along the arrow" and alignItems is "across the arrow", the same as in Phase 1.

Words to recognise
StyleSheet.createcamelCaseflex: 1flexDirectionjustifyContentalignItems

You want each habit to be one row: a tick box on the left, the name next to it, and the streak pushed to the right edge. You already know flexbox from CSS. On a phone it is the same idea with three changes.

1. Styles are JavaScript objects. Names are written in camelCase: background-color becomes backgroundColor, font-size becomes fontSize. Sizes are plain numbers with no px. React Native scales them so a box looks the same size on a small and a big phone.

const styles = StyleSheet.create({
  row: { flexDirection: "row", justifyContent: "space-between", alignItems: "center", padding: 12 },
  name: { color: "white", fontSize: 18 },
});
 
<View style={styles.row}>...</View>

2. Every View is already a flex container. There is no display: flex to write.

3. The default direction is column. Boxes stack top to bottom unless you say flexDirection: "row". So on a phone justifyContent moves things up and down, and alignItems moves them left and right, until you switch to a row. Think of a class register: names go down the page. You only get a row when you ask for one.

flex: 1 means "take all the space that's left". Put it on the screen's outer View so it fills the phone. style can also take a list, and later items win: style={[styles.name, habit.done && styles.doneName]}. That is how one habit turns grey when it's done.

People often write justifyContent: "center" and expect the boxes to move to the middle, left to right. In a column it moves them to the vertical middle. Check the direction first. The other common one is CSS habits: "16px" or background-color don't work. Write 16 and backgroundColor.

When you read a style, find flexDirection first (no value means column). Draw an arrow for it. Then justifyContent is "along the arrow" and alignItems is "across the arrow", the same as in Phase 1.

Words to recognise
StyleSheet.createcamelCaseflex: 1flexDirectionjustifyContentalignItems