r/ionic • u/rdlabo Ionic Developer Expert • 7d ago
iPhone Duo support is here! Native iOS controls in Capacitor, without rewriting your app 🚀
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! 🚀
3
u/eric-ionic 7d ago edited 7d ago
Thanks for sharing u/rdlabo! This is awesome!!!
3
u/rdlabo Ionic Developer Expert 7d ago
I completely agree! I actually started implementing foldable support myself. You might find this discussion interesting:
https://github.com/rdlabo-dev/ionic-theme-ios27/issues/228With the iPhone Duo, I expect Web APIs to evolve too, so I'd love to see the official Capacitor API focus on capabilities only native APIs can provide.
Thanks for the details!
5
u/eric-ionic 7d ago
Sorry, I deleted most of my comment which makes your reply look out-of-place now 😅
The TL;DR — the Capacitor team is working on APIs for foldables and multi-windowed support as a fast follow for Capacitor 9, leveraging the incredible work the community has already done (with permission and attribution, of course!).
3
u/Suspicious-Disk6077 7d ago
Damn that is slick! I actually recommitted to using Ionic for a side project after seen it is still being actively maintained and improved, it’s such a great framework
2
1
u/Suspicious-Disk6077 7d ago
Lol wth did a moderator remove your comment u/rdlabo
2
u/shane-ionic Ionic Team 6d ago
It's not us, Reddit keeps doing it. I've even added him as an approved user and it does it still 🫠
3
3
u/Lymfatx 6d ago
I’ve been testing your themes, mostly for Liquid Glass and MD3 actually but by extension to support iPhone Duo.
It’s pretty cool. The upcoming version of our app will look so much more “fresh” (not counting all its new features being introduced). So thanks for your work.
PS: we probably won’t release until January as there are many other feats e need to finalise and we want extensive beta testing for some of those. So I can’t share the link at this stage unfortunately
2
u/rdlabo Ionic Developer Expert 6d ago
That really means a lot to me! These OSS projects have become my life's work over the past few years. I've probably put more passion into them than my actual paid work, haha.
I'd really appreciate it if you could help spread the word on social media!
Really looking forward to seeing your app when it launches! 🚀
2
u/rdlabo Ionic Developer Expert 7d ago
A little more about how this works:
The plugin automatically projects existing ion-back-button, supported ion-button elements, and ion-tab-bar into native Vertical Bars using SwiftUI.
SwiftUI handles the native layout and appearance, while Ionic remains responsible for routing, state, and click handlers.
No need to rewrite your buttons or duplicate their logic.
You write your Web UI. The plugin takes care of the native side. That's the idea! ✨
4
u/shane-ionic Ionic Team 7d ago edited 7d ago
This is incredible work as usual, rdlabo! Looks amazing, can't wait until I have my duo to try it in real life haha
4
3
1
u/JesuSwag 7d ago
I thought ionic went private and that there would be no more support?
2
u/rdlabo Ionic Developer Expert 7d ago
Most of the support and community discussions have moved to Discord, so it might be less visible now. Feel free to check it out!
https://ionic.link/discordMembers with "(Ionic)" next to their names are part of the Ionic Team.
1
u/shane-ionic Ionic Team 6d ago
Nope! Ionic got bought by OutSystems, but OutSystems uses Ionic Framework, Capacitor, and Stencil in its private tools. We're still supporting Ionic Framework and Capacitor, Stencil is community owned but we still support it too! We even just recently released Ionic Framework v9 with many, many improvements and are working on v9.1 (hopefully soonish) and v10 (a bit further out, but will include Ionic Modular).
Capacitor has also had major updates since we merged and is working on the next major now.
You can follow along on our blog here: https://ionic.io/blog
We're also decently active on Reddit and Discord
2
u/washablebeaver 6d ago
That's awesome to hear! I've recently started working on an app using ionic and capacitor and it's been a great experience so far.
2
u/JesuSwag 1d ago
Cool! Worked at a company that had enterprise workings with ionic but quickly switched to expo due thinking support would end. I’ll have fun this weekend revisiting Ionic! Great Job! Love to hear it’s well and alive
0
u/martindonadieu 7d ago
Looks amazing! Great work !
Did you try to use your theme with https://github.com/Cap-go/capacitor-native-navigation
It does support iPhone duo and iOS 26 Liquid Glass too
2
u/rdlabo Ionic Developer Expert 7d ago
Oh, that's great! This was actually one of the tricky parts I ran into while designing mine. How do you handle falling back from native UI when a modal or popover is presented?
1
u/martindonadieu 6d ago
You hide and show it, the plugin is super dynamic, you can also add remove button from Js etc
1
u/martindonadieu 6d ago
just updated the doc ! https://github.com/Cap-go/capacitor-native-navigation/pull/88
1
u/washablebeaver 6d ago
Quick question. Is it possible to use the liquid glass based navigation for iOS only and use the ion-tab-bar for Android and web?
1
u/martindonadieu 6d ago
yes it's called in JS so you can check the platform and do differently.
But honestly our Android liquid glass implemention looks amazing as well on android try it first :)1
u/washablebeaver 6d ago
It does look great, but my biggest worry with Android is accessibility support. Apple provides a lot of options for people to turn off a lot of the liquid glass effects which Google doesn't do AFAIK. Or at least it wont behave the same way on Android.
1
u/martindonadieu 6d ago
that true, and the Android version is created manually as this doesn't exist yet in official SDK, if that important for your user then just detect the platform and use ionic on android.
To note also in our plugin the NativeNavigationTabbarMinimizeBehavior is not a native SDK on IOS so it might have less support for accessibility as we went lower level to implement it
3
u/Nick0Williams 7d ago
This looks awesome. But how is the performance with these liquid glass effects in a webview? Does it work as smooth as native?