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

useHingeChange

A hook to consume the hinge state changes. Call the hook inside a HingeObserver or an ArrangementView. It observes whichever of the two is nearer.

The hook returns the current HingeState, and subscribes the component to updates. It invokes the callback with the initial unavailable state and then changed values.

The component renders again at every angle the hinge reports. For more granular updates and better performance, use useHingeSelector.

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

function Player() {
  const hinge = useHingeChange();

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

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' }.