Why Side-by-Side Layouts Matter
- Most real-world mobile UIs include rows — avatars and usernames, input fields and icons, or columns of content. Mastering horizontal layout is a must.
- React Native uses a flexbox-based layout system, with 'column' as the default flexDirection.
- To align components side-by-side, you need to change the parent container's flexDirection to 'row'.
How flexDirection Works
- By default, Views stack vertically because flexDirection defaults to 'column'.
- To change that to a horizontal layout, apply flexDirection: 'row' on the parent View.
- Children Views inside the parent will now appear side-by-side, left to right.
- Need help mastering flexbox? Try learning it visually with Flexbox Froggy — it's a fun game that teaches you how justifyContent and alignItems actually work.
Code Example: Side-by-Side Boxes
SideBySideViews.tsx
import React from 'react';
import { View, StyleSheet } from 'react-native';
export const SideBySideViews = () => {
return (
<View style={styles.container}>
<View style={styles.boxA} />
<View style={styles.boxB} />
</View>
);
}
const styles = StyleSheet.create({
container: {
flexDirection: 'row',
justifyContent: 'space-between',
padding: 20,
},
boxA: {
width: 100,
height: 100,
backgroundColor: 'tomato',
},
boxB: {
width: 100,
height: 100,
backgroundColor: 'skyblue',
},
});- Here’s a simple example showing two boxes displayed side-by-side using flexDirection: 'row'.
Tips for Real Apps
- Use justifyContent and alignItems for spacing and alignment inside the row.
- Test responsiveness on different screen sizes — avoid fixed widths unless needed.
- Give each View meaningful style names (e.g., avatarContainer, textColumn) for better code clarity.
Key Takeaways
- Use flexDirection: 'row' on the parent View to align child components horizontally.
- Combine with justifyContent and alignItems to control layout spacing and alignment.
- Flexbox layouts are powerful — learn once and use across mobile and web (React, CSS).