Flexbox Layout in React Native

Flexbox is a layout system that allows you to arrange child components inside a parent component.

const styles = StyleSheet.create({

    container: {
        flex: 1
    }

});

It is commonly used with View components.

The parent component that uses Flexbox properties is called the Flexbox container.

<View style={styles.container}>

    <View />
    <View />
    <View />

</View>

The child components are arranged according to the styles of the parent container.

The flex property controls how a component uses available space.

const styles = StyleSheet.create({

    container: {
        flex: 1
    }

});

A screen container commonly uses flex: 1 so it can occupy the available screen space.

The flexDirection property determines the main direction in which children are arranged.

const styles = StyleSheet.create({

    container: {
        flexDirection: 'row'
    }

});

The main values are row and column.

With flexDirection: 'row', children are arranged horizontally.

const styles = StyleSheet.create({

    container: {
        flexDirection: 'row'
    }

});

For example, three Views can appear from left to right.

With flexDirection: 'column', children are arranged vertically.

const styles = StyleSheet.create({

    container: {
        flexDirection: 'column'
    }

});

Column direction is the common default layout direction in React Native.

The justifyContent property controls the distribution of children along the main axis.

const styles = StyleSheet.create({

    container: {
        justifyContent: 'center'
    }

});

Its effect depends on the current flexDirection.

const styles = StyleSheet.create({

    container: {
        flex: 1,
        justifyContent: 'center'
    }

});

This places the children in the center along the main axis.

const styles = StyleSheet.create({

    container: {
        justifyContent: 'flex-start'
    }

});

This positions children toward the beginning of the main axis.

const styles = StyleSheet.create({

    container: {
        justifyContent: 'flex-end'
    }

});

This positions children toward the end of the main axis.

const styles = StyleSheet.create({

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

});

The available space is distributed between the children.

const styles = StyleSheet.create({

    container: {
        flexDirection: 'row',
        justifyContent: 'space-around'
    }

});

Space is distributed around the children.

const styles = StyleSheet.create({

    container: {
        flexDirection: 'row',
        justifyContent: 'space-evenly'
    }

});

The available space is distributed evenly between and around the children.

The alignItems property controls the alignment of children along the cross axis.

const styles = StyleSheet.create({

    container: {
        alignItems: 'center'
    }

});

It is commonly used together with justifyContent.

const styles = StyleSheet.create({

    container: {
        alignItems: 'center'
    }

});

This centers children along the cross axis.

const styles = StyleSheet.create({

    container: {
        alignItems: 'flex-start'
    }

});

This places children toward the beginning of the cross axis.

const styles = StyleSheet.create({

    container: {
        alignItems: 'flex-end'
    }

});

This places children toward the end of the cross axis.

The alignSelf property allows an individual child to override the parent's alignItems.

const styles = StyleSheet.create({

    container: {
        alignItems: 'center'
    },

    specialBox: {
        alignSelf: 'flex-end'
    }

});

The flexWrap property controls whether children can move to another line when there is not enough space.

const styles = StyleSheet.create({

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

});

This is useful for grids and collections of cards.

The gap property can create consistent space between children.

const styles = StyleSheet.create({

    container: {
        gap: 15
    }

});

This can simplify layouts where children need equal spacing.

const styles = StyleSheet.create({

    container: {
        flexDirection: 'row',
        flexWrap: 'wrap',
        rowGap: 15,
        columnGap: 15
    }

});

These properties allow row and column spacing to be controlled separately.

A common React Native pattern is to center content both vertically and horizontally.

const styles = StyleSheet.create({

    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center'
    }

});

This is useful for welcome screens, loading screens and simple forms.

const styles = StyleSheet.create({

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

});

<View style={styles.row}>

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

</View>

The items are placed horizontally with spacing between them.

const styles = StyleSheet.create({

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

    card: {
        width: 150,
        height: 100,
        padding: 15,
        backgroundColor: 'white'
    }

});

Flexbox wrapping can be used to create grid-like interfaces.

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>

This pattern is useful for application headers.

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 style={styles.menu}>
                    Menu
                </Text>

            </View>

            <View style={styles.cards}>

                <View style={styles.card}>
                    <Text>Courses</Text>
                </View>

                <View style={styles.card}>
                    <Text>Attendance</Text>
                </View>

                <View style={styles.card}>
                    <Text>Fees</Text>
                </View>

                <View style={styles.card}>
                    <Text>Results</Text>
                </View>

            </View>

            <Pressable style={styles.button}>

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

            </Pressable>

        </View>

    );

}

const styles = StyleSheet.create({

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

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

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

    menu: {
        fontSize: 16
    },

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

    card: {
        width: '48%',
        padding: 20,
        backgroundColor: 'white',
        borderRadius: 10
    },

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

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

});

• Forgetting to use flex: 1 when a screen container needs to fill available space.
• Confusing the main axis with the cross axis.
• Using justifyContent when you actually need cross-axis alignment.
• Using alignItems without understanding the current direction.
• Forgetting flexWrap when creating multi-item layouts.
• Using too many fixed widths for responsive layouts.
• Creating crowded layouts without enough spacing.
• Not testing layouts on different screen sizes.

• Use Flexbox for responsive mobile layouts.
• Understand the main axis and cross axis.
• Use flexDirection intentionally.
• Use justifyContent for main-axis distribution.
• Use alignItems for cross-axis alignment.
• Use flexWrap for layouts that need multiple rows.
• Use gap when consistent child spacing is appropriate.
• Combine Flexbox with padding and margin.
• Keep layouts flexible instead of depending unnecessarily on fixed dimensions.

Create Parent View
       ↓
Set flex: 1 if Needed
       ↓
Choose flexDirection
       ↓
Understand Main Axis
       ↓
Set justifyContent
       ↓
Set alignItems
       ↓
Add flexWrap if Needed
       ↓
Add Gap / Margin / Padding
       ↓
Create Responsive Layout
       ↓
Test on Different Screens

Flexbox is one of the most important concepts in React Native. Once you understand direction, main-axis distribution, cross-axis alignment, wrapping and spacing, you can build professional layouts for mobile applications.