Row and Column Layout in React Native

A row layout places child components horizontally from one side toward the other.

const styles = StyleSheet.create({

    container: {
        flexDirection: 'row'
    }

});

Row layouts are commonly used for navigation items, headers, icons and horizontally arranged cards.

A column layout places child components vertically.

const styles = StyleSheet.create({

    container: {
        flexDirection: 'column'
    }

});

Column layouts are commonly used for forms, profile screens, settings pages and vertically arranged content.

The flexDirection property determines the direction of the main axis.

flexDirection: 'row'

or:

flexDirection: 'column'

The direction affects how justifyContent and alignItems behave.

import {
    View,
    Text,
    StyleSheet
} from 'react-native';

export default function App() {

    return (
        <View style={styles.row}>

            <Text>Home</Text>
            <Text>Profile</Text>
            <Text>Settings</Text>

        </View>
    );

}

const styles = StyleSheet.create({

    row: {
        flexDirection: 'row'
    }

});

The three Text components are arranged horizontally.

const styles = StyleSheet.create({

    column: {
        flexDirection: 'column'
    }

});

<View style={styles.column}>

    <Text>Name</Text>
    <Text>Email</Text>
    <Text>Mobile</Text>

</View>

The Text components are arranged vertically.

React Native uses column as the default flexDirection.

<View>

    <Text>First</Text>
    <Text>Second</Text>
    <Text>Third</Text>

</View>

The children are therefore normally arranged vertically unless you specify another direction.

const styles = StyleSheet.create({

    row: {
        flexDirection: 'row',
        gap: 15
    }

});

The gap property can provide consistent spacing between the children.

const styles = StyleSheet.create({

    column: {
        flexDirection: 'column',
        gap: 15
    }

});

This creates consistent space between vertically arranged children.

const styles = StyleSheet.create({

    row: {
        flexDirection: 'row',
        justifyContent: 'space-between'
    }

});

When the direction is row, justifyContent controls distribution along the horizontal main axis.

const styles = StyleSheet.create({

    column: {
        flexDirection: 'column',
        justifyContent: 'space-between'
    }

});

When the direction is column, justifyContent controls distribution along the vertical main axis.

const styles = StyleSheet.create({

    row: {
        flexDirection: 'row',
        alignItems: 'center'
    }

});

In a row layout, alignItems normally controls alignment along the vertical cross axis.

const styles = StyleSheet.create({

    column: {
        flexDirection: 'column',
        alignItems: 'center'
    }

});

In a column layout, alignItems normally controls alignment along the horizontal cross axis.

<View style={styles.row}>

    <View style={styles.box}>
        <Text>One</Text>
    </View>

    <View style={styles.box}>
        <Text>Two</Text>
    </View>

    <View style={styles.box}>
        <Text>Three</Text>
    </View>

</View>

const styles = StyleSheet.create({

    row: {
        flexDirection: 'row',
        gap: 10
    },

    box: {
        padding: 20,
        backgroundColor: '#E2E8F0'
    }

});

<View style={styles.column}>

    <View style={styles.box}>
        <Text>One</Text>
    </View>

    <View style={styles.box}>
        <Text>Two</Text>
    </View>

    <View style={styles.box}>
        <Text>Three</Text>
    </View>

</View>

const styles = StyleSheet.create({

    column: {
        flexDirection: 'column',
        gap: 10
    },

    box: {
        padding: 20,
        backgroundColor: '#E2E8F0'
    }

});

Rows are frequently used to create application headers.

const styles = StyleSheet.create({

    header: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
        padding: 15
    }

});

<View style={styles.header}>

    <Text>My App</Text>

    <Text>Menu</Text>

</View>

Columns are useful for forms because form elements normally appear one below another.

const styles = StyleSheet.create({

    form: {
        flexDirection: 'column',
        gap: 15
    }

});

<View style={styles.form}>

    <TextInput
        placeholder="Name"
    />

    <TextInput
        placeholder="Email"
    />

    <Button
        title="Submit"
    />

</View>

A row is useful when an icon and text need to appear side by side.

<View style={styles.row}>

    <Text>🏠</Text>

    <Text>
        Home
    </Text>

</View>

const styles = StyleSheet.create({

    row: {
        flexDirection: 'row',
        alignItems: 'center',
        gap: 10
    }

});

Row and column layouts can be nested to create more complex interfaces.

<View style={styles.row}>

    <View style={styles.column}>

        <Text>
            Student Name
        </Text>

        <Text>
            Student ID
        </Text>

    </View>

    <Text>
        Profile
    </Text>

</View>

This technique is used extensively in real-world mobile interfaces.

const styles = StyleSheet.create({

    screen: {
        flex: 1,
        flexDirection: 'column'
    },

    header: {
        flexDirection: 'row',
        justifyContent: 'space-between'
    },

    content: {
        flexDirection: 'column'
    }

});

A screen can use a column as its main structure while individual sections use rows.

The flex property can be used to divide available space among children.

<View style={styles.row}>

    <View style={styles.item}>
        <Text>One</Text>
    </View>

    <View style={styles.item}>
        <Text>Two</Text>
    </View>

</View>

const styles = StyleSheet.create({

    row: {
        flexDirection: 'row'
    },

    item: {
        flex: 1,
        padding: 20
    }

});

Both children can share the available space.

Different flex values can distribute available space proportionally.

const styles = StyleSheet.create({

    first: {
        flex: 1
    },

    second: {
        flex: 2
    }

});

The second component receives twice the flex share of the first, assuming the same parent layout conditions.

const styles = StyleSheet.create({

    row: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center'
    }

});

This is useful for placing one element on the left and another on the right.

const styles = StyleSheet.create({

    column: {
        flex: 1,
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center'
    }

});

This creates a column layout with its children centered both vertically and horizontally.

<View style={styles.row}>

    <View style={styles.card}>

        <Text style={styles.number}>
            25
        </Text>

        <Text>
            Courses
        </Text>

    </View>

    <View style={styles.card}>

        <Text style={styles.number}>
            80
        </Text>

        <Text>
            Students
        </Text>

    </View>

</View>

This pattern can be used to create dashboard statistics.

When many items need to fit in a row, flexWrap allows them to move to another line when necessary.

const styles = StyleSheet.create({

    container: {
        flexDirection: 'row',
        flexWrap: 'wrap',
        gap: 12
    },

    item: {
        width: 150,
        padding: 20
    }

});

This is useful for card grids and category layouts.

import React from 'react';

import {
    View,
    Text,
    Pressable,
    StyleSheet
} from 'react-native';

export default function App() {

    return (

        <View style={styles.container}>

            <View style={styles.header}>

                <Text style={styles.title}>
                    Student Dashboard
                </Text>

                <Text>
                    Menu
                </Text>

            </View>

            <View style={styles.content}>

                <Text style={styles.heading}>
                    Dashboard
                </Text>

                <View style={styles.row}>

                    <View style={styles.card}>

                        <Text style={styles.number}>
                            25
                        </Text>

                        <Text>
                            Courses
                        </Text>

                    </View>

                    <View style={styles.card}>

                        <Text style={styles.number}>
                            80
                        </Text>

                        <Text>
                            Students
                        </Text>

                    </View>

                </View>

                <Pressable style={styles.button}>

                    <Text style={styles.buttonText}>
                        View Profile
                    </Text>

                </Pressable>

            </View>

        </View>

    );

}

const styles = StyleSheet.create({

    container: {
        flex: 1,
        backgroundColor: '#F8FAFC'
    },

    header: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
        padding: 20,
        backgroundColor: 'white'
    },

    title: {
        fontSize: 20,
        fontWeight: 'bold'
    },

    content: {
        flex: 1,
        padding: 20,
        flexDirection: 'column'
    },

    heading: {
        fontSize: 26,
        fontWeight: 'bold',
        marginBottom: 20
    },

    row: {
        flexDirection: 'row',
        gap: 12
    },

    card: {
        flex: 1,
        padding: 20,
        backgroundColor: 'white',
        borderRadius: 10
    },

    number: {
        fontSize: 28,
        fontWeight: 'bold',
        marginBottom: 8
    },

    button: {
        marginTop: 25,
        padding: 15,
        backgroundColor: '#2563EB',
        borderRadius: 8,
        alignItems: 'center'
    },

    buttonText: {
        color: 'white',
        fontWeight: 'bold'
    }

});

• Forgetting to set flexDirection: 'row' when a horizontal layout is required.
• Assuming the main axis is always horizontal.
• Confusing justifyContent with alignItems.
• Using too many fixed widths in a row.
• Forgetting flexWrap for layouts with many items.
• Not adding enough spacing between children.
• Creating nested layouts without understanding each parent's direction.
• Not testing row layouts on smaller devices.

• Use rows for horizontally related elements.
• Use columns for vertically related elements.
• Understand the main and cross axes.
• Use justifyContent for main-axis distribution.
• Use alignItems for cross-axis alignment.
• Use flex when children should share available space.
• Use flexWrap when items may need multiple rows.
• Use consistent spacing between components.
• Combine row and column layouts to build complex screens.

Create Parent View
       ↓
Choose Row or Column
       ↓
Set flexDirection
       ↓
Identify Main Axis
       ↓
Use justifyContent
       ↓
Use alignItems
       ↓
Add flex or flexWrap
       ↓
Add Padding and Margin
       ↓
Add Gap When Appropriate
       ↓
Test on Different Screens
       ↓
Create Responsive Layout

Row and column layouts are the foundation of React Native interface design. By combining flexDirection, justifyContent, alignItems, flex, spacing and wrapping, you can create almost any common mobile application layout.