For AI agents: the complete documentation index is available at /react-native-arrangement-view/v0.2/llms.txt, the full documentation bundle is available at /react-native-arrangement-view/v0.2/llms-full.txt, and this page is available as Markdown at /react-native-arrangement-view/v0.2/guide/installation.md.
react-native-arrangement-view
  • v0.2

      • Installation

      npm
      yarn
      pnpm
      bun
      deno
      npm install react-native-arrangement-view

      Then install the iOS pods:

      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.

      Usage

      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 for its props, useHingeChange for the hinge state, and How panes are arranged for what each platform does with them.