flexDirection

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.

Exercise 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>.

Show example 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' }
});

Test yourself

What is the default value of flexDirection?
```
<View style={{ flexDirection: ??? }}>
  <Text>A</Text>
  <Text>B</Text>
</View>
```
- 'row'
- 'horizontal'
- 'column'
- 'stack'
Show answer

'column' — The default is 'column'; children stack top to bottom.

Write the horizontal layout value

<View style={{ flexDirection:____}}>
  <Text>A</Text>
  <Text>B</Text>
</View>

Show answer

<View style={{ flexDirection:'row'}}>
  <Text>A</Text>
  <Text>B</Text>
</View>

Match each value to its direction

'row'

Side by side
'column'

Top to bottom
'column' (default)

Applied even when omitted
flexDirection

Sets the layout direction

Next lesson: justifyContent

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies