React Native uses Flexbox for layout, just like CSS, but with some differences. Flexbox helps create responsive UIs that work on different screen sizes.
Here are the key Flexbox properties in React Native:
| Property | Description |
|---|---|
flex |
Defines how much space an item should take. |
flexDirection |
Sets the direction of children (row or column). |
justifyContent |
Aligns children along the main axis. |
alignItems |
Aligns children along the cross axis. |
alignSelf |
Aligns a single item on the cross axis. |
flexWrap |
Wraps items if they exceed the container size. |
gap, rowGap, columnGap |
Adds spacing between elements (React Native 0.71+). |
flex WorksThe flex property determines how much space an item takes.
<View style={{ flex: 1, backgroundColor: 'lightblue' }} />
<View style={{ flex: 2, backgroundColor: 'lightgreen' }} />
* The second view takes twice the space of the first.
flexDirection: Row vs. ColumnBy default, React Native uses column, unlike CSS, which defaults to row.
<View style={{ flexDirection: 'row' }}>
<View style={{ width: 50, height: 50, backgroundColor: 'red' }} />
<View style={{ width: 50, height: 50, backgroundColor: 'blue' }} />
</View>
* Options:
row → Horizontal layoutcolumn (default) → Vertical layoutrow-reverse → Reverse horizontalcolumn-reverse → Reverse verticaljustifyContent: Align Items on the Main AxisUsed to position items along the main axis (horizontal for row, vertical for column).
<View style={{ flex: 1, justifyContent: 'center' }}>
<Text>Centered</Text>
</View>
* Values :
flex-start (default) → Items start at the beginningcenter → Items centeredflex-end → Items at the endspace-between → Space between itemsspace-around → Space around itemsspace-evenly → Equal spacingalignItems: Align Items on the Cross AxisControls alignment along the cross axis (opposite of justifyContent).
<View style={{ flex: 1, alignItems: 'center' }}>
<Text>Aligned Center</Text>
</View>
* Values :
flex-start → Items at startcenter → Items in the middleflex-end → Items at endstretch (default) → Items stretch to fill the containeralignSelf: Align a Single ItemOverrides alignItems for a specific child.
<Text style={{ alignSelf: 'flex-end' }}>I move alone</Text>
flexWrap: Wrapping ItemsBy default, items stay in a single row/column. Use flexWrap to wrap them.
<View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
<View style={{ width: 100, height: 50, backgroundColor: 'red' }} />
<View style={{ width: 100, height: 50, backgroundColor: 'blue' }} />
<View style={{ width: 100, height: 50, backgroundColor: 'green' }} />
</View>
* Values :
nowrap (default) → No wrappingwrap → Items wrap to the next linegap, rowGap, columnGap (React Native 0.71+)These properties add spacing between items.
<View style={{ flexDirection: 'row', gap: 10 }}>
<View style={{ width: 50, height: 50, backgroundColor: 'red' }} />
<View style={{ width: 50, height: 50, backgroundColor: 'blue' }} />
</View>
* rowGap: Controls gap between rows.
* columnGap: Controls gap between columns.
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
const App = () => {
return (
<View style={styles.container}>
<View style={styles.box}><Text>1</Text></View>
<View style={styles.box}><Text>2</Text></View>
<View style={styles.box}><Text>3</Text></View>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
backgroundColor: '#f0f0f0',
},
box: {
width: 100,
height: 100,
backgroundColor: 'skyblue',
justifyContent: 'center',
alignItems: 'center',
},
});
export default App;
* flex: 1 → Takes up the full screen.
* flexDirection: 'row' → Places items in a row.
* justifyContent: 'space-between' → Evenly spaces items.
* alignItems: 'center' → Centers items vertically.
| Use Case | Recommended Properties |
|---|---|
| Stack items horizontally | flexDirection: 'row' |
| Center an item inside a container | justifyContent: 'center', alignItems: 'center' |
| Distribute items evenly | justifyContent: 'space-between' or space-around |
| Allow items to wrap | flexWrap: 'wrap' |
| Apply spacing between elements | gap, rowGap, columnGap |