react-native-reserved-regions 0.1.0-alpha.0

package/LICENSE

@@ -0,0 +1,20 @@
+MIT License
+
+Copyright (c) 2026 Janic Duplessis
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,90 @@
+# react-native-reserved-regions
+
+Provider-scoped display divisions and occlusions for React Native's New Architecture.
+
+## Requirements
+
+- React Native New Architecture (Fabric)
+- iOS 27.1 for UIKit reserved regions; earlier iOS versions report an empty list
+- Android 7.0 (API 24) or newer; folding features require a device supported by Jetpack WindowManager
+
+The example app uses React Native 0.88.0-rc.1.
+
+## Installation
+
+```sh
+npm install react-native-reserved-regions
+```
+
+On iOS, install pods in your app's `ios` directory. Android links automatically through React Native autolinking.
+
+## Usage
+
+```tsx
+import {
+  ReservedRegionsProvider,
+  useReservedRegions,
+} from 'react-native-reserved-regions';
+
+function Screen() {
+  const regions = useReservedRegions();
+  return regions.map((region, index) => {
+    if (region.kind === 'division') {
+      console.log(region.frame, region.occludesContent);
+    } else {
+      console.log(region.frame);
+    }
+    return null;
+  });
+}
+
+export default function App() {
+  return (
+    <ReservedRegionsProvider style={{ flex: 1 }}>
+      <Screen />
+    </ReservedRegionsProvider>
+  );
+}
+```
+
+`useReservedRegions()` returns an empty array until the native view reports its first layout and when no active regions overlap the provider. It must be called beneath a `ReservedRegionsProvider`. Each region's `frame` uses logical points relative to that provider's top-left corner. A nested provider establishes its own coordinate space. The provider accepts standard React Native `View` props and should cover the content whose reserved regions you want to inspect.
+
+The public type is a tagged union:
+
+```ts
+type ReservedRegion =
+  | {
+      kind: 'division';
+      frame: { x: number; y: number; width: number; height: number };
+      occludesContent: boolean;
+    }
+  | {
+      kind: 'occlusion';
+      frame: { x: number; y: number; width: number; height: number };
+    };
+```
+
+A division splits the available display. `occludesContent` tells you whether content under that division is hidden. An occlusion is an area where content is hidden. On iOS, division regions currently report `occludesContent: false`. The TypeScript declarations in `src/index.tsx` document every field.
+
+## Native sources
+
+- iOS queries UIKit's active `UIView` reserved division and occlusion regions on the provider view. The selectors are resolved at runtime so the library can compile with an SDK older than iOS 27.1. [Apple's reserved regions overview](https://developer.apple.com/videos/play/tech-talks/111463/)
+- Android observes Jetpack WindowManager `FoldingFeature` values and Android display cutout rectangles. A separating or fully occluding fold becomes a division; `OcclusionType.FULL` sets `occludesContent` to `true`. Display cutouts become occlusions. [FoldingFeature reference](https://developer.android.com/reference/androidx/window/layout/FoldingFeature), [WindowInsets reference](https://developer.android.com/reference/android/view/WindowInsets)
+
+The library reports geometry and does not reposition content. Normal safe area insets, system bars, and keyboard insets remain separate concerns.
+
+## Development
+
+```sh
+yarn install
+yarn typecheck
+yarn lint
+yarn test --watch=false
+yarn prepare
+```
+
+To run the example, use `yarn example start`, then `yarn example ios` or `yarn example android`.
+
+## License
+
+MIT

package/ReservedRegions.podspec

@@ -0,0 +1,20 @@
+require "json"
+
+package = JSON.parse(File.read(File.join(__dir__, "package.json")))
+
+Pod::Spec.new do |s|
+  s.name         = "ReservedRegions"
+  s.version      = package["version"]
+  s.summary      = package["description"]
+  s.homepage     = package["homepage"]
+  s.license      = package["license"]
+  s.authors      = package["author"]
+
+  s.platforms    = { :ios => min_ios_version_supported }
+  s.source       = { :git => "https://github.com/AppAndFlow/react-native-reserved-regions.git", :tag => "#{s.version}" }
+
+  s.source_files = "ios/**/*.{h,m,mm,swift,cpp}"
+  s.private_header_files = "ios/**/*.h"
+
+  install_modules_dependencies(s)
+end

package/android/build.gradle

@@ -0,0 +1,57 @@
+buildscript {
+  ext.ReservedRegions = [
+    kotlinVersion: "2.0.21",
+    minSdkVersion: 24,
+    compileSdkVersion: 36
+  ]
+
+  ext.getExtOrDefault = { prop ->
+    if (rootProject.ext.has(prop)) {
+      return rootProject.ext.get(prop)
+    }
+
+    return ReservedRegions[prop]
+  }
+
+  repositories {
+    google()
+    mavenCentral()
+  }
+
+  dependencies {
+    classpath "com.android.tools.build:gradle:8.7.2"
+    // noinspection DifferentKotlinGradleVersion
+    classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:${getExtOrDefault('kotlinVersion')}"
+  }
+}
+
+
+apply plugin: "com.android.library"
+
+if (project.extensions.findByName("kotlin") == null) {
+  apply plugin: "kotlin-android"
+}
+
+
+apply plugin: "com.facebook.react"
+
+android {
+  namespace "com.reservedregions"
+
+  compileSdkVersion getExtOrDefault("compileSdkVersion")
+
+  defaultConfig {
+    minSdkVersion getExtOrDefault("minSdkVersion")
+  }
+
+  compileOptions {
+    sourceCompatibility JavaVersion.VERSION_17
+    targetCompatibility JavaVersion.VERSION_17
+  }
+}
+
+dependencies {
+  implementation "com.facebook.react:react-android"
+  implementation "androidx.window:window:1.5.1"
+  implementation "androidx.window:window-java:1.5.1"
+}

package/android/src/main/AndroidManifest.xml

@@ -0,0 +1,2 @@
+<manifest xmlns:android="http://schemas.android.com/apk/res/android">
+</manifest>

package/android/src/main/java/com/reservedregions/RegionsChangeEvent.kt

@@ -0,0 +1,37 @@
+package com.reservedregions
+
+import com.facebook.react.bridge.Arguments
+import com.facebook.react.bridge.WritableMap
+import com.facebook.react.uimanager.PixelUtil
+import com.facebook.react.uimanager.events.Event
+
+internal class RegionsChangeEvent(
+  surfaceId: Int,
+  viewTag: Int,
+  private val regions: List<ReservedRegion>,
+) : Event<RegionsChangeEvent>(surfaceId, viewTag) {
+  override fun getEventName() = NAME
+
+  override fun getEventData(): WritableMap {
+    val payload = Arguments.createMap()
+    val regionArray = Arguments.createArray()
+    for (region in regions) {
+      val frame = Arguments.createMap()
+      frame.putDouble("x", PixelUtil.toDIPFromPixel(region.frame.left.toFloat()).toDouble())
+      frame.putDouble("y", PixelUtil.toDIPFromPixel(region.frame.top.toFloat()).toDouble())
+      frame.putDouble("width", PixelUtil.toDIPFromPixel(region.frame.width().toFloat()).toDouble())
+      frame.putDouble("height", PixelUtil.toDIPFromPixel(region.frame.height().toFloat()).toDouble())
+      val item = Arguments.createMap()
+      item.putString("kind", region.kind)
+      item.putMap("frame", frame)
+      item.putBoolean("occludesContent", region.occludesContent)
+      regionArray.pushMap(item)
+    }
+    payload.putArray("regions", regionArray)
+    return payload
+  }
+
+  companion object {
+    const val NAME = "topRegionsChange"
+  }
+}

package/android/src/main/java/com/reservedregions/ReservedRegion.kt

@@ -0,0 +1,9 @@
+package com.reservedregions
+
+import android.graphics.Rect
+
+internal data class ReservedRegion(
+  val kind: String,
+  val frame: Rect,
+  val occludesContent: Boolean = false,
+)

package/android/src/main/java/com/reservedregions/ReservedRegionsPackage.kt

@@ -0,0 +1,17 @@
+package com.reservedregions
+
+import com.facebook.react.BaseReactPackage
+import com.facebook.react.bridge.NativeModule
+import com.facebook.react.bridge.ReactApplicationContext
+import com.facebook.react.module.model.ReactModuleInfoProvider
+import com.facebook.react.uimanager.ViewManager
+
+class ReservedRegionsViewPackage : BaseReactPackage() {
+  override fun createViewManagers(reactContext: ReactApplicationContext): List<ViewManager<*, *>> {
+    return listOf(ReservedRegionsViewManager())
+  }
+
+  override fun getModule(name: String, reactContext: ReactApplicationContext): NativeModule? = null
+
+  override fun getReactModuleInfoProvider() = ReactModuleInfoProvider { emptyMap() }
+}

package/android/src/main/java/com/reservedregions/ReservedRegionsView.kt

@@ -0,0 +1,103 @@
+package com.reservedregions
+
+import android.content.Context
+import android.graphics.Rect
+import android.os.Build
+import android.view.ViewTreeObserver
+import android.view.WindowInsets
+import androidx.core.content.ContextCompat
+import androidx.core.util.Consumer
+import androidx.window.java.layout.WindowInfoTrackerCallbackAdapter
+import androidx.window.layout.FoldingFeature
+import androidx.window.layout.WindowInfoTracker
+import androidx.window.layout.WindowLayoutInfo
+import com.facebook.react.uimanager.ThemedReactContext
+import com.facebook.react.views.view.ReactViewGroup
+import kotlin.math.max
+import kotlin.math.min
+
+internal typealias RegionsChangeHandler = (ReservedRegionsView, List<ReservedRegion>) -> Unit
+
+class ReservedRegionsView(context: Context) : ReactViewGroup(context), ViewTreeObserver.OnPreDrawListener {
+  private var tracker: WindowInfoTrackerCallbackAdapter? = null
+  private val layoutInfoConsumer = Consumer<WindowLayoutInfo> { info ->
+    foldingFeatures = info.displayFeatures.filterIsInstance<FoldingFeature>()
+    updateRegions()
+  }
+  private var foldingFeatures: List<FoldingFeature> = emptyList()
+  private var lastRegions: List<ReservedRegion>? = null
+  private var onRegionsChange: RegionsChangeHandler? = null
+
+  override fun onAttachedToWindow() {
+    super.onAttachedToWindow()
+    viewTreeObserver.addOnPreDrawListener(this)
+    val activity = (context as? ThemedReactContext)?.currentActivity
+    if (activity != null) {
+      tracker = WindowInfoTrackerCallbackAdapter(WindowInfoTracker.getOrCreate(context))
+      tracker?.addWindowLayoutInfoListener(activity, ContextCompat.getMainExecutor(context), layoutInfoConsumer)
+    }
+    updateRegions()
+  }
+
+  override fun onDetachedFromWindow() {
+    tracker?.removeWindowLayoutInfoListener(layoutInfoConsumer)
+    tracker = null
+    viewTreeObserver.removeOnPreDrawListener(this)
+    super.onDetachedFromWindow()
+  }
+
+  override fun onPreDraw(): Boolean {
+    updateRegions()
+    return true
+  }
+
+  internal fun setOnRegionsChangeHandler(handler: RegionsChangeHandler) {
+    onRegionsChange = handler
+    updateRegions()
+  }
+
+  private fun updateRegions() {
+    val handler = onRegionsChange ?: return
+    if (!isAttachedToWindow || width == 0 || height == 0) return
+
+    val windowLocation = IntArray(2)
+    getLocationInWindow(windowLocation)
+    val regions = mutableListOf<ReservedRegion>()
+
+    for (feature in foldingFeatures) {
+      if (!feature.isSeparating && feature.occlusionType != FoldingFeature.OcclusionType.FULL) continue
+      val frame = clippedFrame(feature.bounds, windowLocation[0], windowLocation[1]) ?: continue
+      regions.add(ReservedRegion("division", frame, feature.occlusionType == FoldingFeature.OcclusionType.FULL))
+    }
+
+    if (Build.VERSION.SDK_INT >= 35) {
+      rootWindowInsets?.getBoundingRects(WindowInsets.Type.displayCutout())?.forEach { bounds ->
+        clippedFrame(bounds, windowLocation[0], windowLocation[1])?.let { frame ->
+          regions.add(ReservedRegion("occlusion", frame))
+        }
+      }
+    } else if (Build.VERSION.SDK_INT >= 28) {
+      val screenLocation = IntArray(2)
+      getLocationOnScreen(screenLocation)
+      rootWindowInsets?.displayCutout?.boundingRects?.forEach { bounds ->
+        clippedFrame(bounds, screenLocation[0], screenLocation[1])?.let { frame ->
+          regions.add(ReservedRegion("occlusion", frame))
+        }
+      }
+    }
+
+    if (regions != lastRegions) {
+      lastRegions = regions
+      handler(this, regions)
+    }
+  }
+
+  private fun clippedFrame(bounds: Rect, originX: Int, originY: Int): Rect? {
+    val left = max(0, bounds.left - originX)
+    val top = max(0, bounds.top - originY)
+    val right = min(width, bounds.right - originX)
+    val bottom = min(height, bounds.bottom - originY)
+    if (right < left || bottom < top || (right == left && bottom == top)) return null
+    return Rect(left, top, right, bottom)
+  }
+}

package/android/src/main/java/com/reservedregions/ReservedRegionsViewManager.kt

@@ -0,0 +1,37 @@
+package com.reservedregions
+
+import com.facebook.react.bridge.ReactContext
+import com.facebook.react.module.annotations.ReactModule
+import com.facebook.react.uimanager.ThemedReactContext
+import com.facebook.react.uimanager.UIManagerHelper
+import com.facebook.react.uimanager.ViewGroupManager
+import com.facebook.react.viewmanagers.ReservedRegionsViewManagerInterface
+import com.facebook.react.viewmanagers.ReservedRegionsViewManagerDelegate
+
+@ReactModule(name = ReservedRegionsViewManager.NAME)
+class ReservedRegionsViewManager : ViewGroupManager<ReservedRegionsView>(),
+  ReservedRegionsViewManagerInterface<ReservedRegionsView> {
+  private val delegate = ReservedRegionsViewManagerDelegate(this)
+
+  override fun getDelegate() = delegate
+
+  override fun getName() = NAME
+
+  override fun createViewInstance(context: ThemedReactContext) = ReservedRegionsView(context)
+
+  override fun getExportedCustomDirectEventTypeConstants() =
+    mutableMapOf(RegionsChangeEvent.NAME to mutableMapOf("registrationName" to "onRegionsChange"))
+
+  override fun addEventEmitters(reactContext: ThemedReactContext, view: ReservedRegionsView) {
+    super.addEventEmitters(reactContext, view)
+    view.setOnRegionsChangeHandler { source, regions ->
+      val sourceContext = source.context as ReactContext
+      UIManagerHelper.getEventDispatcherForReactTag(sourceContext, source.id)
+        ?.dispatchEvent(RegionsChangeEvent(UIManagerHelper.getSurfaceId(sourceContext), source.id, regions))
+    }
+  }
+
+  companion object {
+    const val NAME = "ReservedRegionsView"
+  }
+}

package/ios/ReservedRegionsView.h

@@ -0,0 +1,14 @@
+#import <React/RCTViewComponentView.h>
+#import <UIKit/UIKit.h>
+
+#ifndef ReservedRegionsViewNativeComponent_h
+#define ReservedRegionsViewNativeComponent_h
+
+NS_ASSUME_NONNULL_BEGIN
+
+@interface ReservedRegionsView : RCTViewComponentView
+@end
+
+NS_ASSUME_NONNULL_END
+
+#endif /* ReservedRegionsViewNativeComponent_h */

package/ios/ReservedRegionsView.mm

@@ -0,0 +1,105 @@
+#import "ReservedRegionsView.h"
+
+#import <objc/message.h>
+
+#import <react/renderer/components/ReservedRegionsViewSpec/ComponentDescriptors.h>
+#import <react/renderer/components/ReservedRegionsViewSpec/EventEmitters.h>
+#import <react/renderer/components/ReservedRegionsViewSpec/Props.h>
+#import <react/renderer/components/ReservedRegionsViewSpec/RCTComponentViewHelpers.h>
+
+#import "RCTFabricComponentsPlugins.h"
+
+using namespace facebook::react;
+
+@implementation ReservedRegionsView {
+  NSArray<NSDictionary *> *_currentRegions;
+}
+
++ (ComponentDescriptorProvider)componentDescriptorProvider
+{
+  return concreteComponentDescriptorProvider<ReservedRegionsViewComponentDescriptor>();
+}
+
+- (instancetype)initWithFrame:(CGRect)frame
+{
+  if (self = [super initWithFrame:frame]) {
+    static const auto defaultProps = std::make_shared<const ReservedRegionsViewProps>();
+    _props = defaultProps;
+  }
+  return self;
+}
+
+- (void)layoutSubviews
+{
+  [super layoutSubviews];
+  [self updateRegions];
+}
+
+- (void)didMoveToWindow
+{
+  [super didMoveToWindow];
+  [self updateRegions];
+}
+
+- (void)updateRegions
+{
+  if (self.window == nil || !_eventEmitter) {
+    return;
+  }
+
+  // UIView reserved region selectors first ship in the iOS 27.1 SDK.
+  SEL querySelector = NSSelectorFromString(@"reservedRegionsOfKind:options:");
+  Class kindClass = NSClassFromString(@"UIViewReservedRegionKind");
+  NSMutableArray<NSDictionary *> *regions = [NSMutableArray new];
+
+  if ([self respondsToSelector:querySelector] && kindClass != nil) {
+    NSArray<NSDictionary<NSString *, NSString *> *> *kinds = @[
+      @{@"selector": @"divisionRegionKind", @"kind": @"division"},
+      @{@"selector": @"occlusionRegionKind", @"kind": @"occlusion"},
+    ];
+
+    for (NSDictionary<NSString *, NSString *> *entry in kinds) {
+      SEL kindSelector = NSSelectorFromString(entry[@"selector"]);
+      if (![kindClass respondsToSelector:kindSelector]) {
+        continue;
+      }
+
+      id kind = ((id (*)(id, SEL))objc_msgSend)(kindClass, kindSelector);
+      NSArray *results = ((NSArray *(*)(id, SEL, id, NSUInteger))objc_msgSend)(self, querySelector, kind, 0);
+      for (id region in results) {
+        if (![region respondsToSelector:@selector(frame)]) {
+          continue;
+        }
+        CGRect frame = [[region valueForKey:@"frame"] CGRectValue];
+        [regions addObject:@{
+          @"kind": entry[@"kind"],
+          @"frame": [NSValue valueWithCGRect:frame],
+        }];
+      }
+    }
+  }
+
+  if ([_currentRegions isEqualToArray:regions]) {
+    return;
+  }
+  _currentRegions = [regions copy];
+
+  ReservedRegionsViewEventEmitter::OnRegionsChange event;
+  for (NSDictionary *region in regions) {
+    CGRect frame = [region[@"frame"] CGRectValue];
+    event.regions.push_back({
+        [region[@"kind"] UTF8String],
+        {frame.origin.x, frame.origin.y, frame.size.width, frame.size.height},
+        false,
+    });
+  }
+  std::static_pointer_cast<ReservedRegionsViewEventEmitter const>(_eventEmitter)->onRegionsChange(event);
+}
+
+- (void)prepareForRecycle
+{
+  [super prepareForRecycle];
+  _currentRegions = nil;
+}
+
+@end

package/lib/module/ReservedRegionsView.js

@@ -0,0 +1,13 @@
+"use strict";
+
+import { View } from 'react-native';
+import { jsx as _jsx } from "react/jsx-runtime";
+export function ReservedRegionsView({
+  onRegionsChange: _onRegionsChange,
+  ...props
+}) {
+  return /*#__PURE__*/_jsx(View, {
+    ...props
+  });
+}
+//# sourceMappingURL=ReservedRegionsView.js.map

package/lib/module/ReservedRegionsView.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["View","jsx","_jsx","ReservedRegionsView","onRegionsChange","_onRegionsChange","props"],"sourceRoot":"../../src","sources":["ReservedRegionsView.tsx"],"mappings":";;AAAA,SAASA,IAAI,QAAwB,cAAc;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAOpD,OAAO,SAASC,mBAAmBA,CAAC;EAClCC,eAAe,EAAEC,gBAAgB;EACjC,GAAGC;AACqB,CAAC,EAAE;EAC3B,oBAAOJ,IAAA,CAACF,IAAI;IAAA,GAAKM;EAAK,CAAG,CAAC;AAC5B","ignoreList":[]}

package/lib/module/ReservedRegionsView.native.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export { default as ReservedRegionsView } from './ReservedRegionsViewNativeComponent';
+//# sourceMappingURL=ReservedRegionsView.native.js.map

package/lib/module/ReservedRegionsView.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["default","ReservedRegionsView"],"sourceRoot":"../../src","sources":["ReservedRegionsView.native.tsx"],"mappings":";;AAAA,SAASA,OAAO,IAAIC,mBAAmB,QAAQ,sCAAsC","ignoreList":[]}

package/lib/module/ReservedRegionsViewNativeComponent.ts

@@ -0,0 +1,24 @@
+import {
+  codegenNativeComponent,
+  type CodegenTypes,
+  type ViewProps,
+} from 'react-native';
+
+export type RegionsChangeEvent = Readonly<{
+  regions: {
+    kind: string;
+    frame: {
+      x: CodegenTypes.Double;
+      y: CodegenTypes.Double;
+      width: CodegenTypes.Double;
+      height: CodegenTypes.Double;
+    };
+    occludesContent: boolean;
+  }[];
+}>;
+
+export interface NativeProps extends ViewProps {
+  onRegionsChange?: CodegenTypes.DirectEventHandler<RegionsChangeEvent>;
+}
+
+export default codegenNativeComponent<NativeProps>('ReservedRegionsView');

package/lib/module/index.js

@@ -0,0 +1,53 @@
+"use strict";
+
+import * as React from 'react';
+import { ReservedRegionsView } from './ReservedRegionsView';
+
+/** A rectangle in logical points relative to the nearest ReservedRegionsProvider. */
+
+/** An active area reserved by the display or system UI. */
+import { jsx as _jsx } from "react/jsx-runtime";
+const ReservedRegionsContext = /*#__PURE__*/React.createContext(null);
+
+/** Makes active reserved regions available to descendants in provider coordinates. */
+export function ReservedRegionsProvider({
+  children,
+  ...props
+}) {
+  const [regions, setRegions] = React.useState([]);
+  return /*#__PURE__*/_jsx(ReservedRegionsContext.Provider, {
+    value: regions,
+    children: /*#__PURE__*/_jsx(ReservedRegionsView, {
+      ...props,
+      onRegionsChange: event => {
+        setRegions(event.nativeEvent.regions.flatMap(region => {
+          if (region.kind === 'division') {
+            return [{
+              kind: 'division',
+              frame: region.frame,
+              occludesContent: region.occludesContent
+            }];
+          }
+          if (region.kind === 'occlusion') {
+            return [{
+              kind: 'occlusion',
+              frame: region.frame
+            }];
+          }
+          return [];
+        }));
+      },
+      children: children
+    })
+  });
+}
+
+/** Returns active regions reported by the nearest ReservedRegionsProvider. */
+export function useReservedRegions() {
+  const regions = React.useContext(ReservedRegionsContext);
+  if (regions === null) {
+    throw new Error('useReservedRegions must be used inside ReservedRegionsProvider');
+  }
+  return regions;
+}
+//# sourceMappingURL=index.js.map

package/lib/module/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","ReservedRegionsView","jsx","_jsx","ReservedRegionsContext","createContext","ReservedRegionsProvider","children","props","regions","setRegions","useState","Provider","value","onRegionsChange","event","nativeEvent","flatMap","region","kind","frame","occludesContent","useReservedRegions","useContext","Error"],"sourceRoot":"../../src","sources":["index.tsx"],"mappings":";;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAE9B,SAASC,mBAAmB,QAAQ,uBAAuB;;AAE3D;;AAYA;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAiBA,MAAMC,sBAAsB,gBAAGJ,KAAK,CAACK,aAAa,CAEhD,IAAI,CAAC;;AAEP;AACA,OAAO,SAASC,uBAAuBA,CAAC;EACtCC,QAAQ;EACR,GAAGC;AACM,CAAC,EAAqB;EAC/B,MAAM,CAACC,OAAO,EAAEC,UAAU,CAAC,GAAGV,KAAK,CAACW,QAAQ,CAA4B,EAAE,CAAC;EAE3E,oBACER,IAAA,CAACC,sBAAsB,CAACQ,QAAQ;IAACC,KAAK,EAAEJ,OAAQ;IAAAF,QAAA,eAC9CJ,IAAA,CAACF,mBAAmB;MAAA,GACdO,KAAK;MACTM,eAAe,EAAGC,KAAK,IAAK;QAC1BL,UAAU,CACRK,KAAK,CAACC,WAAW,CAACP,OAAO,CAACQ,OAAO,CAAEC,MAAM,IAAuB;UAC9D,IAAIA,MAAM,CAACC,IAAI,KAAK,UAAU,EAAE;YAC9B,OAAO,CACL;cACEA,IAAI,EAAE,UAAmB;cACzBC,KAAK,EAAEF,MAAM,CAACE,KAAK;cACnBC,eAAe,EAAEH,MAAM,CAACG;YAC1B,CAAC,CACF;UACH;UACA,IAAIH,MAAM,CAACC,IAAI,KAAK,WAAW,EAAE;YAC/B,OAAO,CAAC;cAAEA,IAAI,EAAE,WAAoB;cAAEC,KAAK,EAAEF,MAAM,CAACE;YAAM,CAAC,CAAC;UAC9D;UACA,OAAO,EAAE;QACX,CAAC,CACH,CAAC;MACH,CAAE;MAAAb,QAAA,EAEDA;IAAQ,CACU;EAAC,CACS,CAAC;AAEtC;;AAEA;AACA,OAAO,SAASe,kBAAkBA,CAAA,EAA8B;EAC9D,MAAMb,OAAO,GAAGT,KAAK,CAACuB,UAAU,CAACnB,sBAAsB,CAAC;EACxD,IAAIK,OAAO,KAAK,IAAI,EAAE;IACpB,MAAM,IAAIe,KAAK,CACb,gEACF,CAAC;EACH;EACA,OAAOf,OAAO;AAChB","ignoreList":[]}

package/lib/module/package.json

@@ -0,0 +1 @@
+{"type":"module"}

package/lib/typescript/package.json

@@ -0,0 +1 @@
+{"type":"module"}

package/lib/typescript/src/ReservedRegionsView.d.ts

@@ -0,0 +1,9 @@
+import { type ViewProps } from 'react-native';
+import type { RegionsChangeEvent } from './ReservedRegionsViewNativeComponent';
+export type ReservedRegionsViewProps = ViewProps & {
+    onRegionsChange?: (event: {
+        nativeEvent: RegionsChangeEvent;
+    }) => void;
+};
+export declare function ReservedRegionsView({ onRegionsChange: _onRegionsChange, ...props }: ReservedRegionsViewProps): import("react").JSX.Element;
+//# sourceMappingURL=ReservedRegionsView.d.ts.map

package/lib/typescript/src/ReservedRegionsView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReservedRegionsView.d.ts","sourceRoot":"","sources":["../../../src/ReservedRegionsView.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AACpD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,sCAAsC,CAAC;AAE/E,MAAM,MAAM,wBAAwB,GAAG,SAAS,GAAG;IACjD,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,WAAW,EAAE,kBAAkB,CAAA;KAAE,KAAK,IAAI,CAAC;CACxE,CAAC;AAEF,wBAAgB,mBAAmB,CAAC,EAClC,eAAe,EAAE,gBAAgB,EACjC,GAAG,KAAK,EACT,EAAE,wBAAwB,+BAE1B"}

package/lib/typescript/src/ReservedRegionsView.native.d.ts

@@ -0,0 +1,2 @@
+export { default as ReservedRegionsView } from './ReservedRegionsViewNativeComponent';
+//# sourceMappingURL=ReservedRegionsView.native.d.ts.map

package/lib/typescript/src/ReservedRegionsView.native.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReservedRegionsView.native.d.ts","sourceRoot":"","sources":["../../../src/ReservedRegionsView.native.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,sCAAsC,CAAC"}

package/lib/typescript/src/ReservedRegionsViewNativeComponent.d.ts

@@ -0,0 +1,19 @@
+import { type CodegenTypes, type ViewProps } from 'react-native';
+export type RegionsChangeEvent = Readonly<{
+    regions: {
+        kind: string;
+        frame: {
+            x: CodegenTypes.Double;
+            y: CodegenTypes.Double;
+            width: CodegenTypes.Double;
+            height: CodegenTypes.Double;
+        };
+        occludesContent: boolean;
+    }[];
+}>;
+export interface NativeProps extends ViewProps {
+    onRegionsChange?: CodegenTypes.DirectEventHandler<RegionsChangeEvent>;
+}
+declare const _default: import("react-native").HostComponent<NativeProps>;
+export default _default;
+//# sourceMappingURL=ReservedRegionsViewNativeComponent.d.ts.map

package/lib/typescript/src/ReservedRegionsViewNativeComponent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReservedRegionsViewNativeComponent.d.ts","sourceRoot":"","sources":["../../../src/ReservedRegionsViewNativeComponent.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,YAAY,EACjB,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAEtB,MAAM,MAAM,kBAAkB,GAAG,QAAQ,CAAC;IACxC,OAAO,EAAE;QACP,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,EAAE;YACL,CAAC,EAAE,YAAY,CAAC,MAAM,CAAC;YACvB,CAAC,EAAE,YAAY,CAAC,MAAM,CAAC;YACvB,KAAK,EAAE,YAAY,CAAC,MAAM,CAAC;YAC3B,MAAM,EAAE,YAAY,CAAC,MAAM,CAAC;SAC7B,CAAC;QACF,eAAe,EAAE,OAAO,CAAC;KAC1B,EAAE,CAAC;CACL,CAAC,CAAC;AAEH,MAAM,WAAW,WAAY,SAAQ,SAAS;IAC5C,eAAe,CAAC,EAAE,YAAY,CAAC,kBAAkB,CAAC,kBAAkB,CAAC,CAAC;CACvE;;AAED,wBAA0E"}

package/lib/typescript/src/index.d.ts

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import type { ViewProps } from 'react-native';
+/** A rectangle in logical points relative to the nearest ReservedRegionsProvider. */
+export type ReservedRegionFrame = Readonly<{
+    /** Distance from the provider's left edge. */
+    x: number;
+    /** Distance from the provider's top edge. */
+    y: number;
+    /** Horizontal extent of the reserved area. */
+    width: number;
+    /** Vertical extent of the reserved area. */
+    height: number;
+}>;
+/** An active area reserved by the display or system UI. */
+export type ReservedRegion = Readonly<{
+    /** A seam or fold that divides the usable display. */
+    kind: 'division';
+    /** The division's bounds in the provider's coordinate space. */
+    frame: ReservedRegionFrame;
+    /** Whether content underneath the division is hidden. */
+    occludesContent: boolean;
+}> | Readonly<{
+    /** An area where content is hidden, such as a camera cutout. */
+    kind: 'occlusion';
+    /** The occlusion's bounds in the provider's coordinate space. */
+    frame: ReservedRegionFrame;
+}>;
+/** Makes active reserved regions available to descendants in provider coordinates. */
+export declare function ReservedRegionsProvider({ children, ...props }: ViewProps): React.JSX.Element;
+/** Returns active regions reported by the nearest ReservedRegionsProvider. */
+export declare function useReservedRegions(): readonly ReservedRegion[];
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAG9C,qFAAqF;AACrF,MAAM,MAAM,mBAAmB,GAAG,QAAQ,CAAC;IACzC,8CAA8C;IAC9C,CAAC,EAAE,MAAM,CAAC;IACV,6CAA6C;IAC7C,CAAC,EAAE,MAAM,CAAC;IACV,8CAA8C;IAC9C,KAAK,EAAE,MAAM,CAAC;IACd,4CAA4C;IAC5C,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC,CAAC;AAEH,2DAA2D;AAC3D,MAAM,MAAM,cAAc,GACtB,QAAQ,CAAC;IACP,sDAAsD;IACtD,IAAI,EAAE,UAAU,CAAC;IACjB,gEAAgE;IAChE,KAAK,EAAE,mBAAmB,CAAC;IAC3B,yDAAyD;IACzD,eAAe,EAAE,OAAO,CAAC;CAC1B,CAAC,GACF,QAAQ,CAAC;IACP,gEAAgE;IAChE,IAAI,EAAE,WAAW,CAAC;IAClB,iEAAiE;IACjE,KAAK,EAAE,mBAAmB,CAAC;CAC5B,CAAC,CAAC;AAMP,sFAAsF;AACtF,wBAAgB,uBAAuB,CAAC,EACtC,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,SAAS,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CA+B/B;AAED,8EAA8E;AAC9E,wBAAgB,kBAAkB,IAAI,SAAS,cAAc,EAAE,CAQ9D"}

package/package.json

@@ -0,0 +1,147 @@
+{
+  "name": "react-native-reserved-regions",
+  "version": "0.1.0-alpha.0",
+  "description": "Provider-scoped reserved display regions for React Native",
+  "main": "./lib/module/index.js",
+  "types": "./lib/typescript/src/index.d.ts",
+  "exports": {
+    ".": {
+      "react-native-reserved-regions-source": "./src/index.tsx",
+      "types": "./lib/typescript/src/index.d.ts",
+      "default": "./lib/module/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "src",
+    "lib",
+    "android",
+    "ios",
+    "cpp",
+    "*.podspec",
+    "react-native.config.js",
+    "!ios/build",
+    "!android/build",
+    "!android/gradle",
+    "!android/gradlew",
+    "!android/gradlew.bat",
+    "!android/local.properties",
+    "!**/__tests__",
+    "!**/__fixtures__",
+    "!**/__mocks__",
+    "!**/.*"
+  ],
+  "scripts": {
+    "example": "yarn workspace react-native-reserved-regions-example",
+    "clean": "del-cli android/build example/android/build example/android/app/build example/ios/build lib",
+    "prepare": "bob build",
+    "typecheck": "tsc",
+    "lint": "eslint \"**/*.{js,ts,tsx}\"",
+    "test": "jest"
+  },
+  "keywords": [
+    "react-native",
+    "ios",
+    "android"
+  ],
+  "author": "Janic Duplessis <janicduplessis@gmail.com> (https://github.com/janicduplessis)",
+  "license": "MIT",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "devDependencies": {
+    "@eslint/compat": "^2.1.0",
+    "@eslint/eslintrc": "^3.3.6",
+    "@eslint/js": "^9.39.5",
+    "@jest/globals": "^29.7.0",
+    "@react-native/babel-preset": "0.88.0-rc.1",
+    "@react-native/eslint-config": "0.86.2",
+    "@react-native/jest-preset": "0.86.2",
+    "@types/react": "^19.2.0",
+    "@types/react-test-renderer": "^19.1.0",
+    "del-cli": "^7.0.0",
+    "eslint": "^9.39.5",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-ft-flow": "^3.0.11",
+    "eslint-plugin-prettier": "^5.5.6",
+    "jest": "^29.7.0",
+    "prettier": "^3.9.6",
+    "react": "19.3.0",
+    "react-native": "0.88.0-rc.1",
+    "react-native-builder-bob": "^0.43.1",
+    "react-test-renderer": "19.3.0",
+    "turbo": "^2.10.8",
+    "typescript": "^6.0.3"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*"
+  },
+  "workspaces": [
+    "example"
+  ],
+  "packageManager": "yarn@4.11.0",
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      [
+        "module",
+        {
+          "esm": true
+        }
+      ],
+      [
+        "typescript",
+        {
+          "project": "tsconfig.build.json"
+        }
+      ]
+    ]
+  },
+  "codegenConfig": {
+    "name": "ReservedRegionsViewSpec",
+    "type": "all",
+    "jsSrcsDir": "src",
+    "android": {
+      "javaPackageName": "com.reservedregions"
+    },
+    "ios": {
+      "components": {
+        "ReservedRegionsView": {
+          "className": "ReservedRegionsView"
+        }
+      }
+    }
+  },
+  "prettier": {
+    "quoteProps": "consistent",
+    "singleQuote": true,
+    "tabWidth": 2,
+    "trailingComma": "es5",
+    "useTabs": false
+  },
+  "jest": {
+    "preset": "@react-native/jest-preset",
+    "testEnvironmentOptions": {
+      "customExportConditions": [
+        "require",
+        "react-native",
+        "react-native-reserved-regions-source"
+      ]
+    },
+    "modulePathIgnorePatterns": [
+      "<rootDir>/example/node_modules",
+      "<rootDir>/lib/"
+    ]
+  },
+  "create-react-native-library": {
+    "type": "fabric-view",
+    "languages": "kotlin-objc",
+    "tools": [
+      "eslint",
+      "jest"
+    ],
+    "version": "0.63.1"
+  }
+}

package/src/ReservedRegionsView.native.tsx

@@ -0,0 +1 @@
+export { default as ReservedRegionsView } from './ReservedRegionsViewNativeComponent';

package/src/ReservedRegionsView.tsx

@@ -0,0 +1,13 @@
+import { View, type ViewProps } from 'react-native';
+import type { RegionsChangeEvent } from './ReservedRegionsViewNativeComponent';
+
+export type ReservedRegionsViewProps = ViewProps & {
+  onRegionsChange?: (event: { nativeEvent: RegionsChangeEvent }) => void;
+};
+
+export function ReservedRegionsView({
+  onRegionsChange: _onRegionsChange,
+  ...props
+}: ReservedRegionsViewProps) {
+  return <View {...props} />;
+}

package/src/ReservedRegionsViewNativeComponent.ts

@@ -0,0 +1,24 @@
+import {
+  codegenNativeComponent,
+  type CodegenTypes,
+  type ViewProps,
+} from 'react-native';
+
+export type RegionsChangeEvent = Readonly<{
+  regions: {
+    kind: string;
+    frame: {
+      x: CodegenTypes.Double;
+      y: CodegenTypes.Double;
+      width: CodegenTypes.Double;
+      height: CodegenTypes.Double;
+    };
+    occludesContent: boolean;
+  }[];
+}>;
+
+export interface NativeProps extends ViewProps {
+  onRegionsChange?: CodegenTypes.DirectEventHandler<RegionsChangeEvent>;
+}
+
+export default codegenNativeComponent<NativeProps>('ReservedRegionsView');

package/src/index.tsx

@@ -0,0 +1,84 @@
+import * as React from 'react';
+import type { ViewProps } from 'react-native';
+import { ReservedRegionsView } from './ReservedRegionsView';
+
+/** A rectangle in logical points relative to the nearest ReservedRegionsProvider. */
+export type ReservedRegionFrame = Readonly<{
+  /** Distance from the provider's left edge. */
+  x: number;
+  /** Distance from the provider's top edge. */
+  y: number;
+  /** Horizontal extent of the reserved area. */
+  width: number;
+  /** Vertical extent of the reserved area. */
+  height: number;
+}>;
+
+/** An active area reserved by the display or system UI. */
+export type ReservedRegion =
+  | Readonly<{
+      /** A seam or fold that divides the usable display. */
+      kind: 'division';
+      /** The division's bounds in the provider's coordinate space. */
+      frame: ReservedRegionFrame;
+      /** Whether content underneath the division is hidden. */
+      occludesContent: boolean;
+    }>
+  | Readonly<{
+      /** An area where content is hidden, such as a camera cutout. */
+      kind: 'occlusion';
+      /** The occlusion's bounds in the provider's coordinate space. */
+      frame: ReservedRegionFrame;
+    }>;
+
+const ReservedRegionsContext = React.createContext<
+  readonly ReservedRegion[] | null
+>(null);
+
+/** Makes active reserved regions available to descendants in provider coordinates. */
+export function ReservedRegionsProvider({
+  children,
+  ...props
+}: ViewProps): React.JSX.Element {
+  const [regions, setRegions] = React.useState<readonly ReservedRegion[]>([]);
+
+  return (
+    <ReservedRegionsContext.Provider value={regions}>
+      <ReservedRegionsView
+        {...props}
+        onRegionsChange={(event) => {
+          setRegions(
+            event.nativeEvent.regions.flatMap((region): ReservedRegion[] => {
+              if (region.kind === 'division') {
+                return [
+                  {
+                    kind: 'division' as const,
+                    frame: region.frame,
+                    occludesContent: region.occludesContent,
+                  },
+                ];
+              }
+              if (region.kind === 'occlusion') {
+                return [{ kind: 'occlusion' as const, frame: region.frame }];
+              }
+              return [];
+            })
+          );
+        }}
+      >
+        {children}
+      </ReservedRegionsView>
+    </ReservedRegionsContext.Provider>
+  );
+}
+
+/** Returns active regions reported by the nearest ReservedRegionsProvider. */
+export function useReservedRegions(): readonly ReservedRegion[] {
+  const regions = React.useContext(ReservedRegionsContext);
+  if (regions === null) {
+    throw new Error(
+      'useReservedRegions must be used inside ReservedRegionsProvider'
+    );
+  }
+  return regions;
+}