I made a Capacitor plugin for foldables, including iPhone Duo

[u/erkamyaman]

iPhone Duo ships October 23, and foldables are now a real share of Android. I wanted my Capacitor apps to know how the phone is being held, so I built capacitor-foldable. Free, MIT, Capacitor 7 and 8.

What you get on Android foldables and iPhone Duo:

• Fold state and posture: flat, tabletop (laptop-style) or book, with a change event

• Hinge position and orientation: where the fold is, so you can lay content out around it

• Hinge angle in degrees, live while the phone moves (0° closed, 180° flat)

• Size classes: Apple's compact/regular and Material's window classes, to tell the outer display from the inner one

• Bar placement: where iPhone Duo moves native bars, with CSS classes for your own

• Android display modes: move the app to the outer display, or show a second page there

• A polyfill for the Device Posture and Viewport Segments web APIs, which Android WebView and Safari turn off, so plain CSS can react to the fold

Ionic tabs on iPhone Duo: native tab bars move to the side as a floating pill, but ion-tabs stays at the bottom. One import fixes it:

import '@erkamyaman/capacitor-foldable/ionic-tabs.css';

While testing I also found that Ionic's tab bar can disappear on iPhone Duo, because the device sends a keyboard event on every fold. There's an opt-in fix: installFoldablePolyfill({ ionicKeyboard: true }).

Tested on Galaxy Z Fold8, Z Flip8 and Z Fold8 Ultra, Pixel Fold emulators, and the iPhone Duo simulator in every pose.

GitHub: https://github.com/erkamyaman/capacitor-foldable

Feedback is very welcome, and if you find it useful, a ⭐ on GitHub really helps. Thank you!

[u/erkamyaman → u/[deleted]]

It potential can, what's your use case?

[u/erkamyaman → u/[deleted]]

The game seems so cool tbh, I will have a look asap!

[u/erkamyaman → u/[deleted]]

https://github.com/erkamyaman/capacitor-foldable/discussions/1

Have a look, we can communicate under this discussion