# react-native-arrangement-view

> Foldable layouts and hinge state for React Native.

## Guide

- [Installation](/react-native-arrangement-view/v0.3/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/v0.3/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/v0.3/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/v0.3/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.
- [useHingeChange](/react-native-arrangement-view/v0.3/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.
- [useArrangementLayout](/react-native-arrangement-view/v0.3/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/v0.3/examples/tent-posture.md): Detect tent posture on a foldable in React Native from the hinge angle and the window's height, then hide the header and home indicator for full-screen content.