This documentation is available as Markdown for AI agents and LLMs. See the full Markdown index or append .md to any documentation URL.

expo-hinge exposes the hinge of a foldable device, such as an Android foldable or iPhone Duo, to the whole app. It reports the angle in degrees and whether the hinge is closed, partially open, or fully open. On Android, the hinge angle sensor provides the angle and Jetpack WindowManager's FoldingFeature provides the status. On iOS, a UIHingeInteraction on the app's window provides these values. For reacting to the hinge from one SwiftUI view, use the onHingeChange modifier from @expo/ui instead.

On Android, hinge updates need Android 11 (API level 30) or later. On iOS, they need iOS 27.1 or later and a build made with Xcode 27.1 or later. On older builds and systems, and on devices without a hinge, the hinge is null. Use hinge state for interactions and effects, not for layout.

Status on Android

Android has no public API that reports a closed hinge, so the status is never closed on Android. Android reports the hinge state only while the app's window spans the fold. Otherwise, such as on the outer screen of a closed device, the status is unknown, but Android still reports the angle. To detect a closed device on Android, check for an angle near 0. Choose a threshold that suits your app, because device makers define their own ranges.

Installation

If you are installing this in an existing React Native app, make sure to install expo in your project.

Usage

import { useHinge } from 'expo-hinge';
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  const hinge = useHinge();

  return (
    <View style={styles.container}>
      <Text>{hinge ? `${hinge.status} at ${Math.round(hinge.angle)}°` : 'No hinge'}</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Use with Reanimated

The expo-hinge/reanimated entry provides the hinge as a Reanimated shared value. The UI thread updates this value on each hinge change and does not wait for the JavaScript thread. Animations that read it stay in sync with the hinge, even when the JavaScript thread is busy. This entry requires react-native-reanimated and react-native-worklets.

import { useAnimatedHinge } from 'expo-hinge/reanimated';
import Animated, { useAnimatedStyle } from 'react-native-reanimated';

export default function Lid() {
  const hinge = useAnimatedHinge();
  const style = useAnimatedStyle(() => ({
    transform: [{ rotate: `${(hinge.get()?.angle ?? 180) - 180}deg` }],
  }));

  return <Animated.View style={[{ width: 120, height: 8, backgroundColor: 'gray' }, style]} />;
}

API

import * as Hinge from 'expo-hinge';

Hooks

const hinge = useAnimatedHinge();
const style = useAnimatedStyle(() => ({
  transform: [{ rotate: `${hinge.get()?.angle ?? 180}deg` }],
}));

const hinge = useHinge();
return <Text>{hinge ? `${hinge.status} at ${hinge.angle}°` : 'No hinge'}</Text>;

Methods

Hinge.getHinge();
// { angle: 120, status: 'partiallyOpen' }

Event subscriptions

Types