# react-native-arrangement-view

> Foldable layouts and hinge state for React Native.

## Guide

- [Installation](/react-native-arrangement-view/v0.2/guide/installation.md): Then install the iOS pods:
- [How panes are arranged](/react-native-arrangement-view/v0.2/guide/how-panes-are-arranged.md): Each platform follows its own conventions. iOS delegates arrangement to SwiftUI's ArrangementView. Android has no system equivalent, so the library applies Material's adaptive layout rules, the ones behind Compose's calculatePaneScaffoldDirective, to the window size and the fold that Jetpack WindowManager reports. axes names the directions in which panes may be placed: "horizontal" is side by side, "vertical" is stacked. A split along an excluded axis never happens; the primary pane shows alone instead.
- [Platform comparison](/react-native-arrangement-view/v0.2/guide/platform-comparison.md): The iPhone Duo and Pixel 10 Pro Fold have different screen sizes, so the pane sizes are not comparable between them, but the placement is. Because of that, some poses and orientations might behave differently stacking on one while side by side on another. For example, when unfolded and turned sideways, the iPhone Duo is taller than wide, so the panels stack. The Pixel 10 Pro Fold is wider than tall, so the panels split side by side. The screenshots below use axes="both". See How panes are arranged for the rules behind them.

## API

- [ArrangementView](/react-native-arrangement-view/v0.2/api/arrangement-view.md)
- [useHingeChange](/react-native-arrangement-view/v0.2/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.

## Examples

- [Tent posture](/react-native-arrangement-view/v0.2/examples/tent-posture.md): Stood up as a tent, with the inner display folded inwards, iPhone Duo keeps the app on the outer display, in landscape. iOS has no tent state. useHingeChange reports the angle the hinge is open at, around 81°, but its status lags behind the angle: a tent reached from closed reads closed, and one reached from open reads partiallyOpen. So don't look for a status. What makes a tent is the hinge being open while the app is on the outer display, which in landscape is a window with a compact height: This follows Apple's guidance for iPhone Duo: there is no system pose, so infer one from the hinge angle, the orientation and the size class together, and keep the hinge for interactions and effects while the arrangement does the layout. Both thresholds are heuristics. Apple does not guarantee the precision or update rate of angle, so check the behavior on hardware. Android has no tent posture either. A Pixel foldable hands over to its inner display as soon as it is open a little way, about 30° on the emulator, and from there WindowManager reports a half-open fold, which ArrangementView splits across. So the check above is true on Android only for a moment, with the cover display outwards.