For AI agents: the complete documentation index is available at /react-native-arrangement-view/v0.1/llms.txt, the full documentation bundle is available at /react-native-arrangement-view/v0.1/llms-full.txt, and this page is available as Markdown at /react-native-arrangement-view/v0.1/api/use-hinge-change.md.

useHingeChange

Call the hook inside a component rendered in either pane. It observes the nearest ArrangementView, keeping events associated with that view's scene. It is not a process-wide sensor subscription.

import { Text } from 'react-native';
import { useHingeChange } from 'react-native-arrangement-view';

function Player() {
  const hinge = useHingeChange((next) => {
    // Use angle/status for effects or interactions.
    // Let ArrangementView handle adaptive layout.
    console.log(next.angle, next.status);
  });

  return (
    <Text>{hinge.angle === null ? 'No hinge' : `${hinge.angle} rad`}</Text>
  );
}

The callback is optional; the hook also returns the current HingeState and subscribes the component to updates. It invokes the callback with the initial unavailable state and then changed values. Changing the callback does not replay the current state.

HingeState

type HingeState = {
  available: boolean;
  angle: number | null; // radians
  status: 'unknown' | 'closed' | 'partiallyOpen' | 'fullyOpen';
};

Before the first native update, without hardware, or when observation is disabled, the state is { available: false, angle: null, status: 'unknown' }. Future unrecognized native statuses remain unknown. Apple's SwiftUI onHingeChange controls event timing and precision. The library does not infer status from angle thresholds, screen dimensions, or device names. Hook cleanup stops React subscriptions when their components unmount.