@momo-kits/arrangement-view 0.0.0-stage → 0.167.1-beta.14

package/ArrangementView.podspec

@@ -0,0 +1,30 @@
+require "json"
+
+package = JSON.parse(File.read(File.join(__dir__, "package.json")))
+
+Pod::Spec.new do |s|
+  s.name         = "ArrangementView"
+  s.version      = package["version"]
+  s.summary      = package["description"]
+  s.homepage     = package["homepage"]
+  s.license      = package["license"]
+  s.authors      = package["author"]
+
+  s.platforms    = { :ios => "15.1" }
+  s.swift_version = "5.0"
+  s.frameworks = "SwiftUI"
+
+  # Runtime availability alone cannot compile symbols absent from an older SDK.
+  sdk_version = `xcrun --sdk iphoneos --show-sdk-version`.strip
+  has_arrangement = Gem::Version.new(sdk_version) >= Gem::Version.new("27.1")
+  s.pod_target_xcconfig = {
+    "DEFINES_MODULE" => "YES",
+    "SWIFT_ACTIVE_COMPILATION_CONDITIONS" => "$(inherited) #{has_arrangement ? 'RAV_HAS_ARRANGEMENT' : ''}"
+  }
+  s.source       = { :git => "https://www.npmjs.com/.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/LICENSE

@@ -0,0 +1,20 @@
+MIT License
+
+Copyright (c) 2026 Thiago Brezinski
+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/android/build.gradle

@@ -0,0 +1,64 @@
+buildscript {
+  ext.ArrangementView = [
+    kotlinVersion: "2.1.20",
+    minSdkVersion: 24,
+    compileSdkVersion: 36,
+    targetSdkVersion: 36
+  ]
+
+  ext.getExtOrDefault = { prop ->
+    if (rootProject.ext.has(prop)) {
+      return rootProject.ext.get(prop)
+    }
+
+    return ArrangementView[prop]
+  }
+
+  repositories {
+    google()
+    mavenCentral()
+  }
+
+  dependencies {
+    classpath "com.android.tools.build:gradle:8.11.0"
+    // noinspection DifferentKotlinGradleVersion
+    classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:${getExtOrDefault('kotlinVersion')}"
+  }
+}
+
+apply plugin: "com.android.library"
+apply plugin: "kotlin-android"
+apply plugin: "com.facebook.react"
+
+android {
+  namespace "com.arrangementview"
+
+  compileSdkVersion getExtOrDefault("compileSdkVersion")
+
+  defaultConfig {
+    minSdkVersion getExtOrDefault("minSdkVersion")
+    targetSdkVersion getExtOrDefault("targetSdkVersion")
+  }
+
+  buildTypes {
+    release {
+      minifyEnabled false
+    }
+  }
+
+  lint {
+    disable "GradleCompatible"
+  }
+
+  compileOptions {
+    sourceCompatibility JavaVersion.VERSION_1_8
+    targetCompatibility JavaVersion.VERSION_1_8
+  }
+}
+
+dependencies {
+  implementation "com.facebook.react:react-android"
+  // Jetpack WindowManager reports the fold; window-java adapts its Flow to a callback.
+  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/arrangementview/ArrangementView.kt

@@ -0,0 +1,242 @@
+package com.arrangementview
+
+import android.content.Context
+import android.graphics.Rect
+import android.hardware.Sensor
+import android.hardware.SensorEvent
+import android.hardware.SensorEventListener
+import android.hardware.SensorManager
+import android.os.Build
+import android.view.View
+import android.view.ViewTreeObserver
+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.bridge.Arguments
+import com.facebook.react.bridge.WritableMap
+import com.facebook.react.uimanager.PixelUtil
+import com.facebook.react.uimanager.ThemedReactContext
+import com.facebook.react.uimanager.UIManagerHelper
+import com.facebook.react.uimanager.events.Event
+import com.facebook.react.views.view.ReactViewGroup
+
+/**
+ * Android has no system arrangement container, so this view only reports what the layout policy
+ * in src/arrange.ts needs: its size, its window's size, the fold crossing it, and the hinge. React
+ * lays out the panes.
+ */
+class ArrangementView(private val reactContext: ThemedReactContext) :
+  ReactViewGroup(reactContext), SensorEventListener {
+
+  var observeHinge = true
+    set(value) {
+      if (field == value) return
+      field = value
+      updateHingeSensor()
+      // JS resets to unavailable when disabled; re-enabling must replay the current state.
+      lastHinge = null
+      emitHinge()
+    }
+
+  private val windowInfo = WindowInfoTrackerCallbackAdapter(WindowInfoTracker.getOrCreate(reactContext))
+  private val sensorManager = reactContext.getSystemService(Context.SENSOR_SERVICE) as SensorManager
+  private val hingeSensor: Sensor? =
+    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.R) {
+      sensorManager.getDefaultSensor(Sensor.TYPE_HINGE_ANGLE)
+    } else {
+      null
+    }
+
+  private var fold: FoldingFeature? = null
+  private var hingeDegrees: Float? = null
+  private var lastHinge: Triple<Boolean, Double, String>? = null
+
+  /**
+   * Yoga's padding and border for this view. Fabric does not apply them to the Android view,
+   * because Yoga has already positioned the descendants. JS lays the panes out inside a wrapper
+   * that fills the content box, so geometry is reported in that box.
+   */
+  val contentInsets = Rect()
+
+  fun setContentInsets(left: Int, top: Int, right: Int, bottom: Int) {
+    contentInsets.set(left, top, right, bottom)
+    // Moving padding from one edge to another keeps the size and moves the fold.
+    emitGeometry()
+  }
+
+  // Geometry is withheld until the first WindowLayoutInfo so JS never arranges without the fold.
+  private var hasWindowLayout = false
+  private val foldInView = Rect()
+  private var lastGeometry: List<Any?>? = null
+
+  private val onWindowLayout = Consumer<WindowLayoutInfo> { info ->
+    fold = info.displayFeatures.filterIsInstance<FoldingFeature>().firstOrNull()
+    hasWindowLayout = true
+    emitGeometry()
+    emitHinge()
+  }
+
+  // Fabric positions views without a layout pass, so ancestors can move this view without any
+  // callback reaching it. Checking before each draw is cheap and sees every such change.
+  private val onPreDraw = ViewTreeObserver.OnPreDrawListener {
+    emitGeometry()
+    true
+  }
+
+  override fun onAttachedToWindow() {
+    super.onAttachedToWindow()
+    val activity = reactContext.currentActivity
+    if (activity != null) {
+      windowInfo.addWindowLayoutInfoListener(
+        activity, ContextCompat.getMainExecutor(reactContext), onWindowLayout)
+    } else {
+      hasWindowLayout = true
+    }
+    viewTreeObserver.addOnPreDrawListener(onPreDraw)
+    updateHingeSensor()
+  }
+
+  override fun onDetachedFromWindow() {
+    super.onDetachedFromWindow()
+    windowInfo.removeWindowLayoutInfoListener(onWindowLayout)
+    viewTreeObserver.removeOnPreDrawListener(onPreDraw)
+    sensorManager.unregisterListener(this)
+  }
+
+  private fun updateHingeSensor() {
+    sensorManager.unregisterListener(this)
+    if (observeHinge && isAttachedToWindow && hingeSensor != null) {
+      sensorManager.registerListener(this, hingeSensor, SensorManager.SENSOR_DELAY_NORMAL)
+    }
+  }
+
+  override fun onSensorChanged(event: SensorEvent) {
+    hingeDegrees = event.values[0]
+    emitHinge()
+  }
+
+  override fun onAccuracyChanged(sensor: Sensor, accuracy: Int) = Unit
+
+  private fun emitHinge() {
+    if (!observeHinge) return
+    val degrees = hingeDegrees
+    // WindowManager names the open postures. It reports no fold for a closed device, whose app
+    // runs on the cover display, so only there does the angle decide.
+    val status =
+      when {
+        fold?.state == FoldingFeature.State.FLAT -> "fullyOpen"
+        fold?.state == FoldingFeature.State.HALF_OPENED -> "partiallyOpen"
+        degrees != null && degrees < CLOSED_DEGREES -> "closed"
+        else -> "unknown"
+      }
+    val available = fold != null || hingeSensor != null
+    val radians = if (degrees != null) Math.toRadians(degrees.toDouble()) else Double.NaN
+    val hinge = Triple(available, radians, status)
+    if (hinge == lastHinge) return
+    lastHinge = hinge
+    dispatch(
+      HINGE_EVENT,
+      Arguments.createMap().apply {
+        putBoolean("available", available)
+        putDouble("angle", radians)
+        putString("status", status)
+      })
+  }
+
+  private fun emitGeometry() {
+    if (!hasWindowLayout) return
+    val fold = fold
+    if (fold != null) {
+      // Fold bounds are in window coordinates. Use this view's layout position rather than
+      // getLocationInWindow so a screen transition's transform doesn't drag the fold along.
+      var x = 0
+      var y = 0
+      var view: View = this
+      while (true) {
+        x += view.left
+        y += view.top
+        val parent = view.parent as? View ?: break
+        x -= parent.scrollX
+        y -= parent.scrollY
+        view = parent
+      }
+      foldInView.set(fold.bounds)
+      foldInView.offset(-x - contentInsets.left, -y - contentInsets.top)
+    } else {
+      foldInView.setEmpty()
+    }
+    val width = width - contentInsets.left - contentInsets.right
+    val height = height - contentInsets.top - contentInsets.bottom
+    // Material sizes panes by the window, as iOS size classes are by the scene.
+    val window = rootView
+    val geometry =
+      listOf(
+        width,
+        height,
+        window.width,
+        window.height,
+        Rect(foldInView),
+        fold?.orientation,
+        fold?.isSeparating,
+        fold?.state)
+    if (geometry == lastGeometry) return
+    lastGeometry = geometry
+    dispatch(
+      GEOMETRY_EVENT,
+      Arguments.createMap().apply {
+        putDouble("width", dp(width))
+        putDouble("height", dp(height))
+        putMap(
+          "window",
+          Arguments.createMap().apply {
+            putDouble("width", dp(window.width))
+            putDouble("height", dp(window.height))
+          })
+        if (fold != null) {
+          putMap(
+            "fold",
+            Arguments.createMap().apply {
+              putDouble("x", dp(foldInView.left))
+              putDouble("y", dp(foldInView.top))
+              putDouble("width", dp(foldInView.width()))
+              putDouble("height", dp(foldInView.height()))
+              putString(
+                "orientation",
+                if (fold.orientation == FoldingFeature.Orientation.VERTICAL) "vertical"
+                else "horizontal")
+              putBoolean("separating", fold.isSeparating)
+              putBoolean("halfOpened", fold.state == FoldingFeature.State.HALF_OPENED)
+            })
+        }
+      })
+  }
+
+  private fun dp(pixels: Int): Double = PixelUtil.toDIPFromPixel(pixels.toFloat()).toDouble()
+
+  // getEventDispatcher(context), its replacement, does not exist in React Native 0.83.
+  @Suppress("DEPRECATION")
+  private fun dispatch(name: String, payload: WritableMap) {
+    UIManagerHelper.getEventDispatcherForReactTag(reactContext, id)
+      ?.dispatchEvent(ArrangementEvent(UIManagerHelper.getSurfaceId(this), id, name, payload))
+  }
+
+  private class ArrangementEvent(
+    surfaceId: Int,
+    viewId: Int,
+    private val name: String,
+    private val payload: WritableMap,
+  ) : Event<ArrangementEvent>(surfaceId, viewId) {
+    override fun getEventName(): String = name
+
+    override fun getEventData(): WritableMap = payload
+  }
+
+  companion object {
+    const val HINGE_EVENT = "topHingeChange"
+    const val GEOMETRY_EVENT = "topGeometryChange"
+    private const val CLOSED_DEGREES = 5f
+  }
+}

package/android/src/main/java/com/arrangementview/ArrangementViewManager.kt

@@ -0,0 +1,36 @@
+package com.arrangementview
+
+import com.facebook.react.module.annotations.ReactModule
+import com.facebook.react.uimanager.ThemedReactContext
+import com.facebook.react.uimanager.annotations.ReactProp
+import com.facebook.react.views.view.ReactViewGroup
+import com.facebook.react.views.view.ReactViewManager
+
+// Extends the plain View manager so every View style (borders, overflow, ...) keeps working.
+// `arrangement` and `axes` are deliberately not handled here: JS arranges the panes on Android.
+@ReactModule(name = ArrangementViewManager.NAME)
+class ArrangementViewManager : ReactViewManager() {
+  override fun getName(): String = NAME
+
+  override fun createViewInstance(context: ThemedReactContext): ReactViewGroup =
+    ArrangementView(context)
+
+  @ReactProp(name = "observeHinge", defaultBoolean = true)
+  fun setObserveHinge(view: ArrangementView, value: Boolean) {
+    view.observeHinge = value
+  }
+
+  override fun setPadding(view: ReactViewGroup, left: Int, top: Int, right: Int, bottom: Int) {
+    (view as ArrangementView).setContentInsets(left, top, right, bottom)
+  }
+
+  override fun getExportedCustomDirectEventTypeConstants(): MutableMap<String, Any> =
+    (super.getExportedCustomDirectEventTypeConstants() ?: mutableMapOf()).apply {
+      put(ArrangementView.HINGE_EVENT, mapOf("registrationName" to "onHingeChange"))
+      put(ArrangementView.GEOMETRY_EVENT, mapOf("registrationName" to "onGeometryChange"))
+    }
+
+  companion object {
+    const val NAME = "RNArrangementView"
+  }
+}

package/android/src/main/java/com/arrangementview/ArrangementViewPackage.kt

@@ -0,0 +1,17 @@
+package com.arrangementview
+
+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 ArrangementViewPackage : BaseReactPackage() {
+  override fun createViewManagers(
+    reactContext: ReactApplicationContext
+  ): List<ViewManager<*, *>> = listOf(ArrangementViewManager())
+
+  override fun getModule(name: String, reactContext: ReactApplicationContext): NativeModule? = null
+
+  override fun getReactModuleInfoProvider() = ReactModuleInfoProvider { emptyMap() }
+}

package/ios/ArrangementHost.swift

@@ -0,0 +1,206 @@
+import SwiftUI
+import Combine
+
+private final class ArrangementModel: ObservableObject {
+  @Published var primary: UIView?
+  @Published var secondary: UIView?
+  @Published var arrangement = "split"
+  @Published var axes = "both"
+  @Published var observeHinge = true
+  @Published var forceSplit = false
+  @Published var primaryRatio: Double = 0
+  var hingeChanged: ((Bool, Double, String) -> Void)?
+  var paneLayout: ((UIView, CGRect) -> Void)?
+  weak var host: UIView?
+
+  var supportedAxes: Axis.Set {
+    switch axes {
+    case "horizontal": return .horizontal
+    case "vertical": return .vertical
+    default: return [.horizontal, .vertical]
+    }
+  }
+}
+
+// UIKit is only the React Native / SwiftUI hosting boundary. All arrangement
+// decisions and hinge observation below use SwiftUI, including the fallback.
+private final class PaneContainer: UIView {
+  weak var model: ArrangementModel?
+  let pane: UIView
+
+  init(pane: UIView, model: ArrangementModel) {
+    self.pane = pane
+    self.model = model
+    super.init(frame: .zero)
+    clipsToBounds = true
+    addSubview(pane)
+  }
+  required init?(coder: NSCoder) { fatalError("init(coder:) is unavailable") }
+  override func hitTest(_ point: CGPoint, with event: UIEvent?) -> UIView? {
+    let target = super.hitTest(point, with: event)
+    return target === self ? nil : target
+  }
+  override func layoutSubviews() {
+    super.layoutSubviews()
+    guard let model, let host = model.host else { return }
+    model.paneLayout?(pane, convert(bounds, to: host))
+  }
+}
+
+private struct ReactPane: UIViewRepresentable {
+  let pane: UIView
+  let model: ArrangementModel
+  func makeUIView(context: Context) -> PaneContainer { PaneContainer(pane: pane, model: model) }
+  func updateUIView(_ view: PaneContainer, context: Context) { view.setNeedsLayout() }
+  @available(iOS 16.0, *)
+  func sizeThatFits(_ proposal: ProposedViewSize, uiView: PaneContainer, context: Context) -> CGSize? {
+    CGSize(width: proposal.width ?? 0, height: proposal.height ?? 0)
+  }
+  static func dismantleUIView(_ view: PaneContainer, coordinator: ()) {
+    // A style change may already have moved the same React view to its new slot.
+    if view.pane.superview === view { view.pane.removeFromSuperview() }
+  }
+}
+
+private struct ArrangementContent: View {
+  @ObservedObject var model: ArrangementModel
+
+  @ViewBuilder private var primary: some View {
+    if let pane = model.primary { ReactPane(pane: pane, model: model) }
+  }
+  @ViewBuilder private var secondary: some View {
+    if let pane = model.secondary { ReactPane(pane: pane, model: model) }
+  }
+
+  @ViewBuilder var body: some View {
+    if model.forceSplit && model.arrangement == "split" {
+      HStack(spacing: 0) {
+        primary.frame(maxWidth: .infinity, maxHeight: .infinity)
+        secondary.frame(maxWidth: .infinity, maxHeight: .infinity)
+      }
+    } else {
+      adaptive
+    }
+  }
+
+  @ViewBuilder private var adaptive: some View {
+#if RAV_HAS_ARRANGEMENT
+    if #available(iOS 27.1, *) {
+      nativeArrangement
+        .onHingeChange(isEnabled: model.observeHinge) { _, context in
+          guard let hinge = context.hinge else {
+            model.hingeChanged?(false, 0, "unknown")
+            return
+          }
+          let status: String
+          switch hinge.status {
+          case .closed: status = "closed"
+          case .partiallyOpen: status = "partiallyOpen"
+          case .fullyOpen: status = "fullyOpen"
+          default: status = "unknown"
+          }
+          model.hingeChanged?(true, hinge.angle.radians, status)
+        }
+    } else {
+      fallback
+    }
+#else
+    fallback
+#endif
+  }
+
+#if RAV_HAS_ARRANGEMENT
+  @available(iOS 27.1, *)
+  @ViewBuilder private var nativeArrangement: some View {
+    if model.arrangement == "overlay" {
+      ArrangementView { primary } secondary: { secondary }
+        .arrangementViewStyle(.overlay.axes(model.supportedAxes))
+    } else {
+      ArrangementView {
+        primary.splitArrangementLayoutRatio(model.primaryRatio > 0 ? CGFloat(model.primaryRatio) : nil)
+      } secondary: {
+        secondary
+      }
+      .arrangementViewStyle(.split.axes(model.supportedAxes))
+    }
+  }
+#endif
+
+  @ViewBuilder private var fallback: some View {
+    if model.arrangement == "overlay" {
+      ZStack { secondary; primary }
+    } else {
+      // Deterministic compact fallback. The secondary React tree stays mounted.
+      primary
+    }
+  }
+}
+
+@objc(RNArrangementHost)
+public final class RNArrangementHost: UIView {
+  private let model = ArrangementModel()
+  private var controller: UIHostingController<ArrangementContent>!
+
+  @objc public var onHingeChange: ((Bool, Double, String) -> Void)? {
+    didSet { model.hingeChanged = onHingeChange }
+  }
+  @objc public var onPaneLayout: ((UIView, CGRect) -> Void)? {
+    didSet { model.paneLayout = onPaneLayout }
+  }
+
+  @objc public override init(frame: CGRect) {
+    super.init(frame: frame)
+    model.host = self
+    controller = UIHostingController(rootView: ArrangementContent(model: model))
+    if #available(iOS 16.4, *) { controller.safeAreaRegions = [] }
+    controller.view.backgroundColor = .clear
+    addSubview(controller.view)
+    clipsToBounds = true
+  }
+  required init?(coder: NSCoder) { fatalError("init(coder:) is unavailable") }
+
+  @objc public func setPanes(_ primary: UIView?, secondary: UIView?) {
+    if model.primary !== primary { model.primary = primary }
+    if model.secondary !== secondary { model.secondary = secondary }
+  }
+  @objc public func configure(
+    _ arrangement: String, axes: String, observeHinge: Bool, forceSplit: Bool, primaryRatio: Double
+  ) {
+    if model.forceSplit != forceSplit { model.forceSplit = forceSplit }
+    if model.primaryRatio != primaryRatio { model.primaryRatio = primaryRatio }
+    if model.arrangement != arrangement { model.arrangement = arrangement }
+    if model.axes != axes { model.axes = axes }
+    if model.observeHinge != observeHinge {
+      model.observeHinge = observeHinge
+      if !observeHinge { model.hingeChanged?(false, 0, "unknown") }
+    }
+  }
+  public override func layoutSubviews() {
+    super.layoutSubviews()
+    attachController()
+    controller.view.frame = bounds
+  }
+  public override func didMoveToWindow() {
+    super.didMoveToWindow()
+    if window == nil { detachController() } else { attachController() }
+  }
+  private func attachController() {
+    guard window != nil else { return }
+    var responder: UIResponder? = superview
+    while let next = responder {
+      if let parent = next as? UIViewController {
+        guard controller.parent !== parent else { return }
+        detachController()
+        parent.addChild(controller)
+        controller.didMove(toParent: parent)
+        return
+      }
+      responder = next.next
+    }
+  }
+  private func detachController() {
+    guard controller.parent != nil else { return }
+    controller.willMove(toParent: nil)
+    controller.removeFromParent()
+  }
+}

package/ios/RNArrangementPane.h

@@ -0,0 +1,5 @@
+#import <React/RCTViewComponentView.h>
+
+@interface RNArrangementPane : RCTViewComponentView
+- (void)updateNativeFrame:(CGRect)frame;
+@end

package/ios/RNArrangementPane.mm

@@ -0,0 +1,47 @@
+#import "RNArrangementPane.h"
+#import "RNArrangementPaneShadowNode.h"
+using namespace facebook::react;
+
+@implementation RNArrangementPane {
+  ArrangementPaneShadowNode::ConcreteState::Shared _paneState;
+  CGRect _nativeFrame;
+  BOOL _hasNativeFrame;
+}
++ (ComponentDescriptorProvider)componentDescriptorProvider {
+  return concreteComponentDescriptorProvider<ArrangementPaneComponentDescriptor>();
+}
++ (BOOL)shouldBeRecycled { return NO; }
+- (instancetype)initWithFrame:(CGRect)frame {
+  if (self = [super initWithFrame:frame]) {
+    _props = std::make_shared<const RNArrangementPaneProps>();
+    self.clipsToBounds = YES;
+  }
+  return self;
+}
+- (void)updateNativeFrame:(CGRect)frame {
+  _nativeFrame = frame;
+  _hasNativeFrame = YES;
+  self.frame = (CGRect){CGPointZero, frame.size};
+  [self synchronizeState];
+}
+- (void)synchronizeState {
+  if (!_paneState || !_hasNativeFrame) return;
+  const auto &old = _paneState->getData();
+  facebook::react::Size size{(Float)_nativeFrame.size.width, (Float)_nativeFrame.size.height};
+  facebook::react::Point origin{(Float)_nativeFrame.origin.x, (Float)_nativeFrame.origin.y};
+  if (old.measured && old.size == size && old.origin == origin) return;
+  _paneState->updateState(ArrangementPaneState{size, origin, true});
+}
+- (void)updateState:(State::Shared const &)state oldState:(State::Shared const &)oldState {
+  [super updateState:state oldState:oldState];
+  _paneState = std::static_pointer_cast<const ArrangementPaneShadowNode::ConcreteState>(state);
+  [self synchronizeState];
+}
+- (void)updateLayoutMetrics:(LayoutMetrics const &)metrics oldLayoutMetrics:(LayoutMetrics const &)oldMetrics {
+  // SwiftUI owns this view's frame. Fabric still receives metrics for descendants,
+  // onLayout and measurement; stale commits must not resize the native pane.
+  auto nativeMetrics = metrics;
+  if (_hasNativeFrame) nativeMetrics.frame = {{0, 0}, {(Float)_nativeFrame.size.width, (Float)_nativeFrame.size.height}};
+  [super updateLayoutMetrics:nativeMetrics oldLayoutMetrics:oldMetrics];
+}
+@end