# react-native-arrangement-view

> Foldable layouts and hinge state for React Native.

## Guide

- [Installation](/react-native-arrangement-view/v0.1/guide/installation.md): Then install the iOS pods: iOS 27 also requires the host app to adopt the scene lifecycle. The example enables ios.enableSceneSupport through expo-build-properties on Expo SDK 57. See Expo’s scene migration guide for host-app configuration.
- [How panes are arranged](/react-native-arrangement-view/v0.1/guide/how-panes-are-arranged.md): ArrangementView delegates layout to Apple's SwiftUI ArrangementView: two React panes can split horizontally or vertically, overlap, or become hidden as the available space and device posture change. SwiftUI determines whether a split is appropriate; an axis restriction does not force two panes to stay visible. This version is iOS only. On Android and web, rendering the component throws an explicit unsupported-platform error.
- [Demos](/react-native-arrangement-view/v0.1/guide/demos.md): Recorded on the iPhone Duo simulator using agent-device. Select a preview to open its MP4. The arrangement recording plays at 2× speed; the hinge recording is real time. See the validation report for tested behavior, build checks, and remaining limitations.

## API

- [ArrangementView](/react-native-arrangement-view/v0.1/api/arrangement-view.md): ArrangementView delegates layout to Apple's SwiftUI ArrangementView: two React panes can split horizontally or vertically, overlap, or become hidden as the available space and device posture change. React owns the content and its state.
- [useHingeChange](/react-native-arrangement-view/v0.1/api/use-hinge-change.md): Call the hook inside a component rendered in either pane. It observes the nearest ArrangementView, keeping events associated with that view's scene. It is not a process-wide sensor subscription. The callback is optional; the hook also returns the current HingeState and subscribes the component to updates. It invokes the callback with the initial unavailable state and then changed values. Changing the callback does not replay the current state.