react-native-device-posture

Cross-platform fold and hinge posture support for React Native devices with a foldable display.

Wrap your app once with FoldStateProvider, then read the same posture state from any screen using useFoldState().

Supported states

Both platforms emit the native listener onFoldStateChange and normalize it into a shared state shape.

| status | Meaning | isFlat | |---|---|---| | unknown | No hinge is available on this device | false | | closed | Device is folded or closed | false | | partiallyOpen | Device is in a mid-fold position | false | | fullyOpen | Device is unfolded flat | true |

isFlat is only true when the device is fully open, which is the state you usually want for a wide dual-screen layout.

iOS reads UIHinge on iOS 27.1 and newer. Android reads Jetpack WindowManager FoldingFeature. Devices without a hinge stay at unknown.

Requires React Native 0.76 or newer with the New Architecture enabled.

Installation

Install from npm:

npm install react-native-device-posture

Then install the iOS pods if you are building for iOS:

cd ios && pod install

Rebuild the native app after installation. A JavaScript reload alone is not enough.

Usage

import {
  FoldStateProvider,
  useFoldState,
  FOLD_STATE_EVENT,
  FOLD_STATUS,
} from 'react-native-device-posture';

function App() {
  return (
    <FoldStateProvider>
      <Root />
    </FoldStateProvider>
  );
}

function Home() {
  const { isFoldSupported, isFlat, status } = useFoldState();
  const isDuoOpen = isFoldSupported && isFlat;

  return isDuoOpen ? <WideHome /> : <PhoneHome />;
}

FOLD_STATE_EVENT is 'onFoldStateChange' on both platforms. The provider subscribes to the native event for you, so screens generally only need to call useFoldState().

useFoldState() throws if it is called outside FoldStateProvider.

API

• FoldStateProvider: sets up native posture listening and exposes the current fold state to descendants.
• useFoldState(): reads the current state from context.
• FOLD_STATE_EVENT: native event name used by both platforms.
• FOLD_STATUS: status constants such as unknown, closed, partiallyOpen, and fullyOpen.