> For AI agents: the complete documentation index is available at /react-native-arrangement-view/v0.3/llms.txt, the full documentation bundle is available at /react-native-arrangement-view/v0.3/llms-full.txt.

# ArrangementView

The container component where you render your primary and secondary panes. It arranges them side by side or stacked, depending on the platform, device, and orientation.

```tsx
import { ArrangementView } from 'react-native-arrangement-view';

export function PlayerScreen() {
  return (
    <ArrangementView style={{ flex: 1 }} arrangement="split" axes="both">
      <ArrangementView.Primary>
        {/* Add your primary view here */}
      </ArrangementView.Primary>
      <ArrangementView.Secondary>
        {/* Add your secondary view here */}
      </ArrangementView.Secondary>
    </ArrangementView>
  );
}
```

## Props

| Prop                        | Default             | Meaning                                                                                                                                                                                                                 |
| --------------------------- | ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| children                    | required            | One `ArrangementView.Primary` and one `ArrangementView.Secondary`; see [below](#arrangementviewprimary--arrangementviewsecondary)                                                                                       |
| `arrangement`               | `"split"`           | `"split"` or `"overlay"`                                                                                                                                                                                                |
| `axes`                      | `"both"`            | `"both"`, `"horizontal"`, or `"vertical"`; applies to either arrangement                                                                                                                                                |
| `primaryEdge`               | none                | `"leading"` or `"trailing"`: the side the primary pane takes when the panes are side by side; see [The primary pane's side](/react-native-arrangement-view/v0.3/guide/how-panes-are-arranged.md#the-primary-panes-side) |
| `onArrangementLayoutChange` | none                | Called with the [`ArrangementLayout`](/react-native-arrangement-view/v0.3/api/use-arrangement-layout.md#arrangementlayout) when it changes                                                                              |
| `observeHinge`              | `true`              | Enables observation for hooks inside this arrangement; disabling it does not disable adaptive layout                                                                                                                    |
| `hingePolicy`               | `"avoidSeparating"` | Android only. The hinges the panes keep clear of: `"avoidSeparating"` a half-open one, `"alwaysAvoid"` a flat one too, `"neverAvoid"` none                                                                              |
| `hingeGap`                  | `24`                | Android only. The space in dp between the panes around an avoided hinge, never narrower than the hinge itself                                                                                                           |

Give the arrangement a bounded size, usually `flex: 1`. The platform determines whether a split is appropriate.

The component adds no safe-area padding. Place it within the safe area supplied by your screen/navigation container, or handle insets in your content.

To adapt a pane's content to what the arrangement shows, such as whether the secondary pane is on screen, use [`useArrangementLayout`](/react-native-arrangement-view/v0.3/api/use-arrangement-layout.md) inside a pane, or `onArrangementLayoutChange` outside the panes.

## ArrangementView\.Primary / ArrangementView\.Secondary

`ArrangementView.Primary` and `ArrangementView.Secondary` are slot markers: they render no view of their own and do not affect layout. Put your own pane component inside each one. Both must be direct children of `ArrangementView`, in either order.

Any other direct child is ignored, and a missing, duplicated, or unrecognized child logs a warning in development builds.

Give each pane's root `flex: 1` to fill its assigned space.

Don't move content between `ArrangementView.Primary` and `ArrangementView.Secondary` based on the layout or the hinge: React remounts content that changes slots, losing its state.

Use `primaryEdge` to choose the primary pane's side, and [`useArrangementLayout`](/react-native-arrangement-view/v0.3/api/use-arrangement-layout.md) to adapt content within a pane.

In overlay mode the **primary is in front of the secondary**. Use a transparent primary background and `pointerEvents="box-none"` on its full-size React wrapper for floating controls.