Dimensions & Layout
Understanding device dimensions, screen sizes, and how to create layouts that work across different devices and orientations. 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
Getting Device Dimensions
Use Dimensions API to get the screen dimensions and create responsive layouts. Dimensions.get('window') gives you the window dimensions, while Dimensions.get('screen') gives you the screen dimensions.
Handling Orientation Changes
Listen to orientation changes using Dimensions.addEventListener to update your layout when the device rotates between portrait and landscape modes.. This is an essential concept that every React Native developer must understand thoroughly. In professional development environments, getting this right can mean the difference between code that works reliably and code that breaks in production. The following sections break this down into clear, digestible pieces with practical examples you can try immediately
Safe Area Handling
Use SafeAreaView or react-native-safe-area-context to handle safe areas on devices with notches, status bars, and home indicators. This ensures your content is not hidden behind system UI elements.. This is an essential concept that every React Native developer must understand thoroughly. In professional development environments, getting this right can mean the difference between code that works reliably and code that breaks in production. The following sections break this down into clear, digestible pieces with practical examples you can try immediately
Responsive Dimensions Example
import React, { useState, useEffect } from 'react';
import { View, Text, StyleSheet, Dimensions } from 'react-native';
const ResponsiveDimensions = () => {
const [dimensions, setDimensions] = useState(Dimensions.get('window'));
useEffect(() => {
const subscription = Dimensions.addEventListener('change', ({ window }) => {
setDimensions(window);
});
return () => subscription?.remove();
}, []);
const isTablet = dimensions.width >= 768;
const isLandscape = dimensions.width > dimensions.height;
return (
<View style={styles.container}>
<Text style={styles.title}>
Device: {isTablet ? 'Tablet' : 'Phone'}
</Text>
<Text style={styles.subtitle}>
Orientation: {isLandscape ? 'Landscape' : 'Portrait'}
</Text>
<Text style={styles.info}>
Width: {Math.round(dimensions.width)}px
</Text>
<Text style={styles.info}>
Height: {Math.round(dimensions.height)}px
</Text>
<View style={[
styles.content,
isTablet && styles.tabletContent,
isLandscape && styles.landscapeContent
]}>
<Text>Responsive Content</Text>
</View>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
padding: 20,
},
title: {
fontSize: 24,
fontWeight: 'bold',
marginBottom: 10,
},
subtitle: {
fontSize: 18,
marginBottom: 20,
},
info: {
fontSize: 16,
marginBottom: 5,
},
content: {
width: '100%',
height: 200,
backgroundColor: '#E3F2FD',
justifyContent: 'center',
alignItems: 'center',
borderRadius: 8,
marginTop: 20,
},
tabletContent: {
height: 300,
},
landscapeContent: {
flexDirection: 'row',
},
});
export default ResponsiveDimensions;