AcertijosappsThe puzzle is in the making
Back

react-native-fold

@acertijosapps/react-native-fold · v1.0.0 · 0 downloads

React Native
react-native-fold — Preview
Choose package manager
$ npm i @acertijosapps/react-native-fold$ yarn add @acertijosapps/react-native-fold

Description

Exposes the fold state through the useFold hook and ships components that arrange your UI around the hinge. On Android it reads the posture from androidx.window; on iOS, the hinge state from UIHingeInteraction.

  • useFold returns whether the device is half-opened, whether the hinge separates the screen, its orientation and its bounds in dp (null when there is no fold).
  • FoldPane splits top and bottom in tabletop posture; FoldBookPane, side by side in book posture. Nest one as the other's fallback to cover both.
  • Each pane measures its own position in the window, so it lines up with the hinge even below a header, and reserves the fold's space instead of splitting 50/50.

Requires React Native 0.80+ with the New Architecture (it is a Turbo Module) and React 19.1+. On iOS, detection needs iOS 27.1+ and building with Xcode 27.1 or later; with an older Xcode the library still compiles, but useFold always returns null on iOS.