Summary - Flexbox
- React Native course
- Beginner
- Lesson 41/116
- 5 min
Combine flexDirection, justifyContent and alignItems to write a menu bar.
Summary - Flexbox
In this group you learned five things. flexDirection lays children side by side or stacked. justifyContent distributes on the main axis; alignItems aligns on the cross axis. flex gives a child a proportional share of the free space. flexWrap moves overflowing children to a new line.
Now you will combine them into a real menu bar: logo on the left, three menu items on the right, all on one row and centered vertically. Two short tasks lead you there.
Practice Menu bar skeleton
Fill the empty StyleSheet.create block. Define a style named bar with flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center'. The component returns a <View style={styles.bar}> with <Text>Logo</Text> on the left and <Text>Menu</Text> on the right.
Starter code
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
export default function MenuBar() {
// Write the menu bar with View and two Text
return null;
}
// Add the bar style hereSample solution
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
export default function MenuBar() {
return (
<View style={styles.bar}>
<Text>Logo</Text>
<Text>Menu</Text>
</View>
);
}
const styles = StyleSheet.create({
bar: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }
});Practice Add three menu items on the right
Replace the single Text on the right of the previous skeleton with a <View style={styles.right}> containing three items. Add a right style: flexDirection: 'row', gap: 12. The right View should contain three <Text>: Home, About, Contact.
Starter code
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
export default function MenuBar() {
return (
<View style={styles.bar}>
<Text>Logo</Text>
<Text>Menu</Text>
</View>
);
}
const styles = StyleSheet.create({
bar: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }
// Add the right style here
});Sample solution
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
export default function MenuBar() {
return (
<View style={styles.bar}>
<Text>Logo</Text>
<View style={styles.right}>
<Text>Home</Text>
<Text>About</Text>
<Text>Contact</Text>
</View>
</View>
);
}
const styles = StyleSheet.create({
bar: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' },
right: { flexDirection: 'row', gap: 12 }
});Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 Which property distributes on the main axis?
/* when flexDirection: 'row' */- flexWrap
- alignItems
- flex
- justifyContent Correct answer
Explanation: justifyContent distributes on the main axis.
2 Match each property to its job
| Term | Meaning |
|---|---|
flexDirection |
Layout direction |
justifyContent |
Main-axis distribution |
alignItems |
Cross-axis alignment |
flexWrap |
Move to a new line |