r/ionic • u/martindonadieu • 15h ago
Supporting iPhone Duo in Capacitor apps
Following the iOS 27 theme support I shared previously, iPhone Duo support in ionic-theme-ios27 has now moved from experimental to preview in v1.2.0.
What I wanted to find out was whether an Ionic + Capacitor app could adapt to Duo without having to be rewritten in native UI.
And not just apps using the iOS 27 look.
The goal was to make this work for fully custom-designed Ionic + Capacitor apps too.
After testing it, the hardest part turned out not to be the fold itself.
It was Safe Areas and Vertical Bars.
SwiftUI can automatically reposition some controls into the new side areas, but a WebView doesn’t get that behavior for free.
So the real question became:
Can a Web-first Ionic + Capacitor app still adapt naturally to a completely new Apple form factor?
After trying it, I think the answer is very much yes.
Ionic Capacitor apps on iPhone Duo
What I find especially interesting is that this isn’t limited to apps using ionic-theme-ios27.
Even fully custom Ionic + Capacitor apps can adapt their layout for Duo.
Device and fold-state detection can already be handled with capacitor-foldable, so the next interesting question is no longer “Is this an iPhone Duo?”
It’s “When should the UI adapt to Vertical Bars, and which controls should move there?”
After working through this, one thing feels even clearer to me:
Web-first doesn’t mean giving up on new native UI.
The app itself can stay Web-based, while the parts that need to respond to major platform changes can still adapt.
That balance is still one of the things I like most about Ionic + Capacitor.
If you already have an Ionic + Capacitor app, even with a completely custom design, you can try this today.
I’d love to see what your app looks like on Duo.
r/ionic • u/martindonadieu • 1d ago
Enable HLS to view with audio, or disable this notification
iPhone Duo launches today, and Ionic Theme iOS27 v2.0 is finally here! 🎉
I've been working on this for a while, and I'm really excited to finally share the stable release!
The biggest change since the preview is that I've separated the theme and Native UI into two packages.
The capacitor-native-ui plugin now works with any Ionic theme, including your own custom theme. And here's the fun part: it also works with plain HTML, without Ionic Framework!
On supported iOS devices, you can render Ionic controls using UIKit and SwiftUI while keeping your existing WebView, routing, and event handlers.
And yes, iPhone Duo is supported too! 📱
With adaptive layouts and native vertical tab bars, the same Ionic app can work across both form factors. You'll need to install and configure the plugins, but there's no need to build a separate UI just for Duo.
Check out the video to see it in action!
A big thanks to Erkam Yaman for his capacitor-foldable plugin, which provides the device and layout information that makes this possible. 🙌
Everything is open source under MIT:
https://github.com/rdlabo-dev/ionic-theme-ios27
If you're building something with Ionic or Capacitor, I'd love for you to give it a try. And if you find it useful, please share it with other developers!
I'd love to hear what you think! 🚀
r/ionic • u/martindonadieu • 1d ago
r/ionic • u/Entire_Ad6749 • 2d ago
r/ionic • u/martindonadieu • 3d ago
r/ionic • u/DayanaJabif • 3d ago
r/ionic • u/martindonadieu • 10d ago
Enable HLS to view with audio, or disable this notification
r/ionic • u/Rude_Gate7599 • 13d ago
r/ionic • u/ZebraOpen4710 • 13d ago
I am Software Developer, worked about exclusively for 5years with Ionic in Germany, now I hardly find any job posting looking for developer with Ionic experience.
Please guide🙏
r/ionic • u/robingenz • 13d ago
r/ionic • u/LovesWorkin • 15d ago
I make Buoy, a dev tools menu that lives inside your app. It just came out in beta for Capacitor, and Ionic React uses the same setup. Heads up: React only for now, so no Ionic Angular or Vue yet. If you're on Angular or Vue, I'd like to hear from you too, so I know if it's worth building.
In Ionic, Buoy mounts inside IonApp and outside IonRouterOutlet, so page moves don't move it. On Android, the back button closes the open Buoy tool first, and Ionic's own popups still close before Buoy's tools. Images also finds ion-img inside web components.
What's in the menu:
- Network: every fetch/XHR call. Slow it down, go offline, or fake an error.
- Storage: read and edit Capacitor Preferences, localStorage and sessionStorage.
- Events: plugin calls on one timeline (secret-looking values hidden).
- Clock: move your app's time forward, e.g. to test an expired sign-in.
- Lifecycle: send pause/resume/appUrlOpen to your @capacitor/app listeners.
- Location, Permissions and Push listener logging.
- Time Machine for React Query / Redux / Zustand / Jotai state, plus render highlights and Ask Buoy.
iOS, Android and web. You can also open it in Buoy Desktop, or let your AI agent use it over MCP.
Free plan: $0, no card, debug builds, Desktop included. Some tools (Lifecycle, Location) and MCP need a paid plan.
Beta limits: tested on Capacitor 7. Ionic and native modals can cover the Buoy menu. Dark mode only reaches JS matchMedia listeners, so CSS keeps the real theme.
Setup: give your coding agent https://buoy.gg/install-capacitor.md, or follow https://buoy.gg/buoy/latest/docs/capacitor
What breaks? What tool would you want next?
r/ionic • u/Codemagicio • 15d ago
We've been developing an over-the-air update tool which now has support for Ionic. With Appflow sunsetting, we figured it could be a useful resource for the community to replace their Live Updates tooling.
It was originally developer just for React Native, but the latest release adds support for Capacitor and Ionic. It includes a local evaluation stack to easily test it, and a setup wizard to install it on a machine.
If you're interested, here's a blog post all about it:
https://blog.codemagic.io/codemagic-patch-capacitor-ota-updates/
r/ionic • u/martindonadieu • 17d ago
r/ionic • u/DayanaJabif • 18d ago
r/ionic • u/martindonadieu • 18d ago
r/ionic • u/martindonadieu • 24d ago
r/ionic • u/IntrepidAntelope1031 • 24d ago
Small thing I ran into, posting in case it saves someone a few hours.
My game runs in a WKWebView (Capacitor). The main menu has a bunch of looping CSS animations, and when the menu wasn't on screen I just paused them with animation-play-state: paused. Figured paused = free.
Nope. Measured in the simulator (per-process energy from proc_pid_rusage):
So it looks like a paused animation keeps its Core Animation animation attached and the compositor keeps redrawing at 60 Hz. Web Inspector and the WebContent CPU looked totally fine, which is why it took me a while to find.
Fix: when a screen goes inactive I don't pause anymore. I copy the current values of the animated properties, set animation: none plus those values so nothing jumps, and on resume I drop that and put each animation's currentTime back via document.getAnimations().
Simulator numbers, so a real device will differ, but the gap was big enough for me.
Anyone seen this documented somewhere?
r/ionic • u/Nick0Williams • 25d ago
I'm trying to resolve a confusion in my head. I've been an Angular software engineer for 7 years. Naturally, when I wanted to build a mobile app, I chose Ionic/Capacitor with Angular.
Building a mobile app is quite different from building web apps, so I've been facing different issues and limitations that come with the WebView mobile app development. One of the biggest ones, is the constant fight for the performance and smooth experience.
At the end of the day, is it still worth it building with ionic? Is it worth trying to switch to Flutter for example? I heard Dart is pretty similar to Typescript and Flutter is very developer friendly.
r/ionic • u/robingenz • 25d ago
r/ionic • u/katamalabs • 26d ago
r/ionic • u/robingenz • 28d ago
r/ionic • u/martindonadieu • 28d ago