View-relative coordinates
Measure a whole screen or a smaller panel. Each provider establishes its own coordinate space.
Coordinates →REACT NATIVE · NEW ARCHITECTURE
Reserved Regions
for React Native
Get the bounds of folds, camera cutouts, and system UI on iOS and Android. Use them to keep content and controls clear.
react-native-reserved-regions
PROVIDER COORDINATES669 × 951 pt951 × 669 pt
divisionx:0 y:475.5w:669 h:0 pt
divisionx:475.5 y:0w:0 h:669 pt
occlusionx:573 y:42w:54 h:54 pt
occlusionx:855 y:573w:54 h:54 pt
Divisions and occlusions
A tagged union distinguishes divisions from occlusions. Divisions also tell you whether content is hidden.
API reference →iOS and Android
UIKit reserved regions and Android folding features share an API with documented platform differences.
Platform support →Usage
Wrap a view in ReservedRegionsProvider and read its regions with useReservedRegions.
Pair region frames with safe area insets when your screen needs both edge spacing and information about its interior.
Use it with safe area context →Inside your provider
const regions = useReservedRegions();
for (const region of regions) {
if (region.kind === 'division') {
const hidden = region.occludesContent;
}
const { x, y, width, height } = region.frame;
}
Example app
The native example compares full-screen, inset, and content-box providers, with safe area insets alongside reserved regions.