Make your Capacitor app fold-aware on iPhone Duo, Galaxy Z Fold and Flip, and Pixel Fold. Fold state, posture, hinge angle, size classes and where the native bars go, from one plugin.
Hinge Guess is a small game where the phone is the controller: fold it to the target angle, tap Measure, and score how close you got. Ionic Angular, Capacitor, and this plugin's hinge angle behind the dial, with the protractor's pivot sitting right on the crease.
npm install @erkamyaman/capacitor-foldable
npx cap sync| Capacitor | Plugin | npm tag | iOS |
|---|---|---|---|
| 9 beta | 9.x beta | @next | Size classes and iPhone Duo. Setup in the release notes |
| 8 | 8.x | latest | Size classes, plus iPhone Duo on 8.5+ and iOS 27.1 |
| 7 | 7.x | @latest-7 | Size classes only |
import { Foldable } from '@erkamyaman/capacitor-foldable';
const { posture } = await Foldable.getFoldState(); // 'flat' | 'tabletop' | 'book'
Foldable.addListener('foldStateChange', ({ posture }) => {
document.documentElement.dataset.posture = posture;
});Flat, half-opened or closed, and whether the phone is held as a book or a tabletop.
The hinge bounds and orientation, and whether the fold splits the web view in two.
Live degrees from 0 to 180, plus a folding event while the hinge moves.
Which screen the app is on, and Material window size classes.
Which edge iPhone Duo moves native bars to, and how many points they take, so HTML tab bars can follow.
Rear display and dual screen on Android foldables.
Chrome ships the Device Posture and Viewport Segments APIs, but Android's WebView disables both, and Safari 27.1 keeps them behind a flag an app can't set. installFoldablePolyfill() fills them in from the native fold state and mirrors the CSS features on <html>.
import { installFoldablePolyfill } from '@erkamyaman/capacitor-foldable';
await installFoldablePolyfill();
navigator.devicePosture.type; // 'continuous' | 'folded'
window.viewport.segments; // two DOMRects when the fold splits the view| Standard CSS | With the polyfill |
|---|---|
@media (device-posture: folded) | .device-posture-folded |
@media (horizontal-viewport-segments: 2) | .horizontal-viewport-segments-2 |
env(viewport-segment-width 0 0) | var(--viewport-segment-width-0-0) |
| Fold position, flat or half-open | var(--fold-left), var(--fold-width), .fold-vertical |
| Native bars moved to the side | .vertical-bars-leading, .vertical-bars-trailing |
Native tab bars move to the side on iPhone Duo, but ion-tabs stays across the bottom, right over the fold. One import moves it the way the system does, and an opt-in fix stops the tab bar disappearing when the phone folds.
import '@erkamyaman/capacitor-foldable/ionic-tabs.css';
ionic-tabs.cssWant the controls rendered natively instead? See Capacitor Native UI below.
By Masahiko Sakakibara (rdlabo). Renders existing Ionic buttons, tabs and segments with UIKit and SwiftUI, including the side rail on iPhone Duo, while state and handlers stay in the web view. It uses this plugin as its standard device integration.
Also by rdlabo. iOS 27 styling for Ionic apps, with layout helpers that take this plugin's bar edge and measured inset to make room for the rail.
A collaborative recipe keeper, meal planner and shopping list by Julian Poyourow. Its iOS app follows this plugin's fold state and bar placement to move the native tab bar to the side on iPhone Duo.
A privacy-first AI prompt manager by yarin-zhang. Alongside rdlabo's theme, its iOS app follows this plugin's bar placement to move the tab bar to the side rail on iPhone Duo.
Using Capacitor Native UI? Install it alongside the plugin:
npm install @rdlabo/capacitor-native-ui @erkamyaman/capacitor-foldableUsing Claude Code, Codex or another coding agent? Give it the skill, so it uses the plugin correctly instead of guessing at the API: laying out around the crease, the full API, Ionic specifics, iPhone Duo, Android foldables, and how to test on both.
npx skills add erkamyaman/capacitor-foldable@capacitor-foldableThe skill ships inside the npm package under skills/, so an agent can find it in node_modules.
The same skill on its own, next to the iPhone Duo skills for SwiftUI and UIKit.
A full set of Ionic and Capacitor skills, this one included.
Paste this into Claude Code, Cursor, Codex or any other coding agent working on your Capacitor app:
Task: Make this Capacitor app fold-aware on iPhone Duo and Android foldables
using @erkamyaman/capacitor-foldable.
Context:
- Docs: https://erkamyaman.github.io/capacitor-foldable/
- API: https://erkamyaman.github.io/capacitor-foldable/api.html
- If the capacitor-foldable skill is installed (node_modules/@erkamyaman/
capacitor-foldable/skills/), read it first.
- Needs Capacitor 8.5 or later for iPhone Duo (iOS 27 scene lifecycle).
On Capacitor 7, stop and report instead of upgrading on your own.
Steps:
1. npm install @erkamyaman/capacitor-foldable, then npx cap sync.
2. At startup, call installFoldablePolyfill() once. It fills in
navigator.devicePosture and window.viewport.segments, and sets classes
and variables on <html>: .device-posture-folded,
.horizontal-viewport-segments-2, --fold-left, --fold-width,
.vertical-bars-leading / .vertical-bars-trailing.
3. Keep interactive content out of the fold: when the view is split in two,
lay out each half from --fold-left and --fold-width (or the viewport
segments) instead of centering across the crease.
4. HTML tab bars and toolbars: iPhone Duo moves native bars to the side, but
HTML bars stay put. Follow getBarPlacement() / barPlacementChange
({ verticalBarEdge: 'leading' | 'trailing' | null, inset }) or the
.vertical-bars-* classes.
5. Ionic with ion-tabs: import '@erkamyaman/capacitor-foldable/ionic-tabs.css'.
If the tab bar disappears after folding, pass { ionicKeyboard: true } to
installFoldablePolyfill().
6. Use getHingeAngle() / hingeAngleChange only for features that really
depend on the angle; layout should come from fold state and segments.
Deliverables:
1. Files changed, and which fold signals each screen uses.
2. Manual test poses: iPhone Duo closed, open portrait, open landscape, half
folded (book and tabletop); an Android foldable folded and flat.
Constraints:
- Only use APIs from the plugin's definitions.ts and the docs above.
- Don't add fold logic to screens that look fine in every pose.| Platform | Support |
|---|---|
| Android | Galaxy Z Fold and Flip, Pixel Fold and other foldables, through Jetpack WindowManager. API 24+. |
| iOS | Size classes everywhere. Fold, hinge and bar placement on iPhone Duo with iOS 27.1. iOS 15+. |
| Web | Stub that reports flat, so the same code runs in the browser. |
No permissions, no tracking, public APIs only, and a privacy manifest included.
Capacitor Foldable is free and MIT licensed, built and tested in spare time. A star helps other developers find it, and sponsoring keeps it maintained as new foldables and OS releases land.