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

# useHingeChange

A hook to consume the hinge state changes. Call the hook inside an [`ArrangementView`](/react-native-arrangement-view/v0.3/api/arrangement-view.md). It observes the nearest one.

The hook returns the current [`HingeState`](/react-native-arrangement-view/v0.3/api/use-hinge-change.md#hingestate), and subscribes the component to updates. It invokes the callback with the initial unavailable state and then changed values.

```tsx
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

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