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.

Get started

npm install react-native-reserved-regions

View-relative coordinates

Measure a whole screen or a smaller panel. Each provider establishes its own coordinate space.

Coordinates A nested provider establishes coordinates relative to its container.

Divisions and occlusions

A tagged union distinguishes divisions from occlusions. Divisions also tell you whether content is hidden.

API reference Phone displays with camera occlusions and usable content areas.

iOS and Android

UIKit reserved regions and Android folding features share an API with documented platform differences.

Platform support Foldable and conventional devices on iOS and Android.

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.

Learn more

const regions = useReservedRegions();

for (const region of regions) {
  if (region.kind === 'division') {
    const hidden = region.occludesContent;
  }

  const { x, y, width, height } = region.frame;
}

Compare full-screen, inset, and content-box providers, with safe area insets alongside reserved regions.

Example app ↗