react-native-arrangement-view

Foldable layouts and hinge state for React Native.

Documentation

Install

yarn add react-native-arrangement-view
cd ios && pod install

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

Quick Start

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>
  );
}

ArrangementView places the two panes; on a foldable, a half-open hinge splits them on either side of the crease:

Half-open · Portrait

| iOS | Android | | -------------------------------------------------------------------------- | ------------------------------------------------------------------------------ | | | |

Half-open · Turned right

| iOS | Android | | --------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------- | | | |