# react-native-arrangement-view

> Foldable layouts and hinge state for React Native.

## Guide

- [Installation](/react-native-arrangement-view/guide/installation.md): Install react-native-arrangement-view in a React Native or Expo app, and build a first two-pane screen for foldable devices.
- [How panes are arranged](/react-native-arrangement-view/guide/how-panes-are-arranged.md): The rules ArrangementView follows to place two panes around a foldable's hinge on iOS and Android: window size, posture, axes and the primary pane's side.
- [Platform comparison](/react-native-arrangement-view/guide/platform-comparison.md): Screenshots of one two-pane React Native layout on iPhone Duo and Pixel 10 Pro Fold: closed, half-open and flat, in every orientation.

## API

- [ArrangementView](/react-native-arrangement-view/api/arrangement-view.md): ArrangementView is a React Native component that arranges a primary and a secondary pane side by side, stacked or overlaid, around a foldable's hinge.
- [HingeObserver](/react-native-arrangement-view/api/hinge-observer.md): HingeObserver provides a foldable's hinge angle and status to every screen of a React Native app, outside an ArrangementView.
- [useHingeChange](/react-native-arrangement-view/api/use-hinge-change.md): useHingeChange is a React Native hook that returns a foldable's hinge angle, and whether the device is closed, partially open or fully open.
- [useHingeSelector](/react-native-arrangement-view/api/use-hinge-selector.md): useHingeSelector follows one value derived from a foldable's hinge, such as half-open, and renders again only when that value changes.
- [useArrangementLayout](/react-native-arrangement-view/api/use-arrangement-layout.md): useArrangementLayout tells a React Native component whether the secondary pane is on screen, and whether the panes are side by side, stacked or overlapping.

## Examples

- [Tent posture](/react-native-arrangement-view/examples/tent-posture.md): Detect tent posture on the iPhone Duo foldable in React Native from the hinge angle and the window's height, then hide the header and home indicator for full-screen content.
- [Video player](/react-native-arrangement-view/examples/video-player.md): A React Native video player for foldables: in tabletop posture the video sits above the hinge, and the controls below it.
- [Split view](/react-native-arrangement-view/examples/split-view.md): Use ArrangementView inside React Native Screens' split view on iOS, so the detail column arranges its panes around the fold as the sidebar opens and closes.
- [Native components](/react-native-arrangement-view/examples/native-components.md): Native components, such as the bottom sheet from Expo UI, are drawn by the system, so the system decides where they go on a foldable. On iOS, the sheet moves to one half of the screen when the device is held like a book.