flexDirection
- React Native course
- Beginner
- Lesson 36/116
- 5 min
Learn layout direction with flexDirection.
flexDirection
In React Native every View is a flex container by default. flexDirection decides how its children are laid out. Two core values: 'column' stacks children top to bottom (vertical), 'row' places them side by side (horizontal).
Important: 'column' is the default; you get the same behavior even if you omit it. For a horizontal row you must write flexDirection: 'row'. The property applies to the container; children stay on one line even when they overflow (you will fix that later with flexWrap).
Horizontal row example
Picture a button bar: Save and Cancel should sit side by side. You give the outer View flexDirection: 'row'. The two Text children now flow left to right.
Code: <View style={{ flexDirection: 'row' }}><Text>Save</Text><Text>Cancel</Text></View>. Spacing between the children will be tuned later with justifyContent. For now setting the direction is enough.
Practice Lay two boxes side by side
Fill the empty StyleSheet.create block. Define a style named row with flexDirection: 'row'. The component returns a <View style={styles.row}> containing <Text>A</Text> and <Text>B</Text>.
Starter code
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
export default function Row() {
return (
<View>
<Text>A</Text>
<Text>B</Text>
</View>
);
}
const styles = StyleSheet.create({
// Add the row style here
});Sample solution
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
export default function Row() {
return (
<View style={styles.row}>
<Text>A</Text>
<Text>B</Text>
</View>
);
}
const styles = StyleSheet.create({
row: { flexDirection: 'row' }
});Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 What is the default value of flexDirection?
<View style={{ flexDirection: ??? }}>
<Text>A</Text>
<Text>B</Text>
</View>- 'row'
- 'horizontal'
- 'column' Correct answer
- 'stack'
Explanation: The default is 'column'; children stack top to bottom.
2 Write the horizontal layout value
<View style={{ flexDirection:____}}>
<Text>A</Text>
<Text>B</Text>
</View><View style={{ flexDirection:'row'}}>
<Text>A</Text>
<Text>B</Text>
</View>Explanation: 'row' lays children side by side.
3 Match each value to its direction
| Term | Meaning |
|---|---|
'row' |
Side by side |
'column' |
Top to bottom |
'column' (default) |
Applied even when omitted |
flexDirection |
Sets the layout direction |