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

# Installation


```sh [npm]
npm install react-native-arrangement-view
```

```sh [yarn]
yarn add react-native-arrangement-view
```

```sh [pnpm]
pnpm add react-native-arrangement-view
```

```sh [bun]
bun add react-native-arrangement-view
```

```sh [deno]
deno add npm:react-native-arrangement-view
```

Then install the iOS pods:

```sh
cd ios && pod install
```

:::warning
Expo Go is not supported. Use a development build (`npx expo run:ios`, `npx expo run:android`).
:::

## Requirements

- React 19 or later
- React Native 0.83 or later
- On iOS, the native arrangement needs iOS 27.1 and the iOS 27.1 SDK. Older versions use the [fallback](/react-native-arrangement-view/v0.5/guide/how-panes-are-arranged.md#fallback).

## Usage

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

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

function Player() {
  // Called inside a pane, the hook observes the nearest ArrangementView.
  const hinge = useHingeChange();

  return (
    <Text>
      {hinge.angle === null
        ? 'No hinge'
        : `${Math.round((hinge.angle * 180) / Math.PI)}° ${hinge.status}`}
    </Text>
  );
}
```

See [`ArrangementView`](/react-native-arrangement-view/v0.5/api/arrangement-view.md) for its props, [`useHingeChange`](/react-native-arrangement-view/v0.5/api/use-hinge-change.md) for the hinge state, and [How panes are arranged](/react-native-arrangement-view/v0.5/guide/how-panes-are-arranged.md) for what each platform does with them.