What are responsive layout and safe areas?
Phones come in many sizes and shapes, with notches, rounded corners, and home indicators that intrude on the screen. Responsive layout adapts to the dimensions; safe areas keep your content out of the regions the system reserves.
Why it matters
An app that looks right on your test phone can be broken on others — content hidden behind a notch, buttons under the home indicator, cramped on small screens. Handling dimensions and safe areas is what makes an app look correct on every device, which reviewers and users notice immediately.
What to learn
- The
DimensionsAPI anduseWindowDimensions - Safe area insets and
SafeAreaView - The safe-area-context library
- Designing for small and large screens
- Orientation changes
- Avoiding hardcoded pixel sizes
- Testing across device sizes
Common pitfall
Hardcoding a top padding to dodge the status bar or notch. The inset differs across devices, so a fixed value is wrong everywhere except your test phone. Use safe area insets, which report the correct padding per device, instead of guessing a magic number that breaks on the next screen.
Resources
Primary (free):
- React Native — useWindowDimensions · docs
- safe-area-context — Docs · docs
- Expo — Safe areas · docs
Practice
Take a screen and make it safe-area aware: wrap it so content avoids the notch and
home indicator using insets, not hardcoded padding. Use useWindowDimensions to
adapt a layout for small versus large screens. Done when the screen looks correct
on a notched device and a small one.
Outcomes
- Read screen dimensions and adapt layout to them.
- Respect safe-area insets instead of hardcoded padding.
- Handle orientation changes.
- Verify a layout across multiple device sizes.