StyleSheet & Flexbox
Master React Native styling with StyleSheet and Flexbox layout system for responsive and beautiful mobile interfaces. This is a foundational concept in cross-platform mobile development that professional developers rely on daily. The explanations below are written to be beginner-friendly while covering the depth and nuance that comes from real-world React Native experience. Take your time with each section and practice the examples
75 min•By Priygop Team•Last updated: Feb 2026
StyleSheet API
StyleSheet provides an abstraction layer similar to CSS stylesheets. It creates style objects with an ID that can be referenced instead of creating new style objects each time. This improves performance and enables better debugging.
Flexbox Layout System
- flex - How much space the component should take — a critical concept in cross-platform mobile development that you will use frequently in real projects
- flexDirection - Main axis direction (row/column) — a critical concept in cross-platform mobile development that you will use frequently in real projects
- justifyContent - Alignment along main axis — a critical concept in cross-platform mobile development that you will use frequently in real projects
- alignItems - Alignment along cross axis — a critical concept in cross-platform mobile development that you will use frequently in real projects
- flexWrap - whether items should wrap — a critical concept in cross-platform mobile development that you will use frequently in real projects
- alignContent - Alignment of wrapped lines — a critical concept in cross-platform mobile development that you will use frequently in real projects
Common Layout Patterns
- Center content - justifyContent: 'center', alignItems: 'center'
- Space between - justifyContent: 'space-between'
- Equal spacing - flex: 1 on child components
- Full width/height - width: '100%', height: '100%'
- Aspect ratio - aspectRatio property — a critical concept in cross-platform mobile development that you will use frequently in real projects
Responsive Design with Flexbox
Example
import React from 'react';
import { View, Text, StyleSheet, Dimensions } from 'react-native';
const { width } = Dimensions.get('window');
const ResponsiveLayout = () => {
return (
<View style={styles.container}>
<View style={styles.header}>
<Text style={styles.title}>Responsive Layout</Text>
</View>
<View style={styles.content}>
<View style={styles.sidebar}>
<Text>Sidebar</Text>
</View>
<View style={styles.main}>
<Text>Main Content</Text>
</View>
</View>
<View style={styles.footer}>
<Text>Footer</Text>
</View>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#f5f5f5',
},
header: {
height: 60,
backgroundColor: '#2196F3',
justifyContent: 'center',
alignItems: 'center',
},
title: {
color: 'white',
fontSize: 18,
fontWeight: 'bold',
},
content: {
flex: 1,
flexDirection: width > 768 ? 'row' : 'column',
},
sidebar: {
width: width > 768 ? 200 : '100%',
height: width > 768 ? '100%' : 100,
backgroundColor: '#E3F2FD',
justifyContent: 'center',
alignItems: 'center',
},
main: {
flex: 1,
backgroundColor: 'white',
justifyContent: 'center',
alignItems: 'center',
},
footer: {
height: 50,
backgroundColor: '#1976D2',
justifyContent: 'center',
alignItems: 'center',
},
});
export default ResponsiveLayout;