wix/ios26-navigation
Reference for iOS 26 navigation bar, tab bar, toolbar, and Liquid Glass building blocks (UITab, scroll-edge effects, search placement, shared-background platter, UIButton glass configurations, UIGlassEffect / UIGlassContainerEffect, UINavigationItem.style navigator/browser/editor, UICornerConfiguration / concentric corners, UISheetPresentationController, SF Symbols 7) plus the internal view hierarchy of UIBarButtonItem and UIToolbar, and how react-native-navigation maps to all of it. Use when adding or fixing iOS 26 behavior in RNN's top bar, bottom tabs, bar buttons, toolbar, modals, or any glass-styled custom chrome; when investigating iOS 26-only regressions; or when deciding how to expose a new iOS 26 capability through RNN options.
npx skills add https://github.com/wix/react-native-navigation --skill ios26-navigation
Use this skill any time work touches:
@available(iOS 26.0, *) branchPair this with rnn-codebase (repo navigation) and rnn-e2e-runner (validation).
rnn-build-release.mdc. Debug masks iOS 26 layout/transition issues.DEVELOPER_DIR=/Applications/Xcode_26.1.app/Contents/DeveloperiPhone 17 Pro Max (iOS 26 default)UIDesignRequiresCompatibility in Info.plist. RNN reads it in RNNReactButtonView.designRequiresCompatibility to fall back to pre-iOS-26 layout. Always honor it in new iOS 26 code paths.The system bar material on UINavigationBar, UITabBar, UIToolbar is always translucent / glass by default. configureWithOpaqueBackground is silently overlaid with glass unless you also nil out backgroundEffect.
UIBarAppearance.backgroundEffect = nil — required to actually get an opaque/transparent fill on iOS 26.UITabBarAppearance / UINavigationBarAppearance / UIToolbarAppearance — same backgroundEffect rule.RNN handling:
ios/BottomTabsAppearancePresenter.mm: branches on iOS 26 — uses configureWithTransparentBackground + backgroundEffect=nil + sets tabBar.backgroundColor. Pre-26 uses configureWithOpaqueBackground.ios/TopBarAppearancePresenter.mm: same pattern for the navigation bar.The tab bar floats above content on iOS 26 instead of pushing it up. Content underneath needs to extend.
safeAreaInsets.bottom increases for content.drawBehind should be YES on iOS 26.RNN handling:
ios/RNNBottomTabsOptions.mm (-shouldDrawBehind): defaults drawBehind to YES on iOS 26, NO otherwise.ios/RNNBottomTabsController.mm: rnn_cycleAllTabsThenRestoreInitialSelection — iOS 26 first-layout bug where tab item titles get misplaced; cycle selection in viewDidAppear to force a correct layout. Gated by _rnnDidApplyInitialTabBarSelectionFix.Modern tab API replaces viewControllers with tabs: [UITab]. Supports UITabGroup, UISearchTab, and UITabBarController.mode = .tabSidebar.
UITab(title:image:identifier:viewControllerProvider:) — lazy VC creation per tab.UITabBarController.tabs — array of UITab, can mix UITab and UITabGroup.UITabBarController.mode — .tabBar (default) vs .tabSidebar (iPad sidebar).UISearchTab — first-class search tab, integrates with UINavigationItem search.UITabBarController.sidebarLayoutPreferences — iPad sidebar customization.UITabBarController.tabBarPlacement — .automatic, .bottom, .top (iPadOS 26 can pin the tab bar at the top of the window).mode changes inside UIView.animate.RNN handling: RNN currently uses the legacy viewControllers API. There is no UITab / tabs adoption yet. New iOS 26 tab features (sidebar mode, search tab, groups, top placement) would need a new code path in RNNBottomTabsController and corresponding Options.ts surface.
Persistent floating mini-control attached above the tab bar (e.g., Apple Music's now-playing bar).
UITabBarController.bottomAccessory: UITabAccessory?UITabAccessory(contentView:) — wraps a UIView.RNN handling: Not yet exposed. Would need a new option (e.g., bottomTabs.accessory: { component: { name, ... } }) and a presenter to mount a React view inside a UITabAccessory.
iOS 26 makes scrollEdgeAppearance matter more (the bar fades to transparent when scrolled to the top). New scrollEdgeEffect on UINavigationItem controls the effect.
UINavigationItem.scrollEdgeEffect — controls the fading/glass effect at scroll edges.UINavigationBar.scrollEdgeAppearance — appearance when at the scroll edge.UITabBar.scrollEdgeAppearance — same for tab bar.RNN handling:
scrollEdgeAppearance exposed via top bar options — see website/docs/api/options-scrollEdgeAppearance.mdx.scrollEdgeEffect added in PR #8281 (Add scrollEdgeEffect option).iOS 26 introduces three placements:
UINavigationItemSearchBarPlacementStacked — under the title, classic.UINavigationItemSearchBarPlacementIntegrated — inline with the title bar, expanded.UINavigationItemSearchBarPlacementIntegratedButton — collapsed to a button until tapped.Property: UINavigationItem.preferredSearchBarPlacement. Availability-gated, not present pre-iOS-26.
RNN handling:
ios/RNNSearchBarPlacement.mm / .h — JS-facing enum.ios/UIViewController+RNNOptions.mm (setSearchBar...): maps RNN's SearchBarPlacementIntegrated to integrated or integrated-button depending on focus. Falls through to stacked otherwise.iOS 26 wraps every UIBarButtonItem in a shared Liquid Glass platter. Custom views and pre-styled UIButtons get double-decorated.
UIBarButtonItem.hidesSharedBackground: Bool — opt out of the platter.RNN handling:
ios/RNNUIBarButtonItem.mm: defaults hidesSharedBackground = YES on iOS 26 for both icon buttons and custom (React) view buttons. Pins custom view to 44x44.ios/RNNReactButtonView.mm: width/height constraints + center translation post-mount to keep the React view aligned inside the reserved 44pt slot.RNNButtonOptions.hideSharedBackground (also on RNNBackButtonOptions) — see src/interfaces/Options.ts.UIBarButtonItemGroup factory APIs and prominent style (iOS 26)iOS 26 added direct factories on UIBarButtonItem that build groups inline. These are the cleanest way to make the shared platter intentional rather than relying on UIKit's implicit clustering.
UIBarButtonItem.creatingFixedGroup() -> UIBarButtonItemGroup
UIBarButtonItem.creatingMovableGroup(customizationIdentifier:) -> UIBarButtonItemGroup
UIBarButtonItem.creatingOptionalGroup(customizationIdentifier:isInDefaultCustomization:) -> UIBarButtonItemGroup
Plus a new style:
UIBarButtonItem.style = .prominent — primary-action styling, tints the platter with the bar's tintColor at full saturation. Use sparingly (one prominent item per bar).When grouping is intentional, UIKit renders the group under a single _UIBarItemGroupPlatter (see §7b/§9) instead of one platter per item. hidesSharedBackground still applies per item, so you can mix glassed and bare items inside one group.
RNN handling: Not exposed today. If a future option models a logical action cluster, build it as a UIBarButtonItemGroup rather than a sequence of items so the platter coalesces correctly.
References:
UIBarButtonItem on iOS 26UIBarButtonItem is not a UIView — it's a model object. UIKit materializes it into a private view hierarchy inside the parent UINavigationBar or UIToolbar. The exact class names are private and can change; the layering and ordering are stable and worth knowing for layout debugging.
Approximate structure for a single bar button item (Liquid Glass, iOS 26):
UINavigationBar / UIToolbar
└── _UIBarBackground (bar-wide background, Liquid Glass material)
└── _UIButtonBarStackView (horizontal stack of items, leading or trailing group)
└── _UIModernBarButton (host view per item; one per UIBarButtonItem)
├── _UIBarItemPlatter (shared Liquid Glass background; the "platter")
│ └── CAFilter / glass layers (UIGlassEffect-backed)
└── content view (image, title label, OR customView)
Key facts that affect RNN code:
UIBarButtonItemGroup (or implicit leading/trailing cluster) can be coalesced into a single shared platter spanning several items. This is the "shared background" that hidesSharedBackground opts out of.hidesSharedBackground = YES removes the _UIBarItemPlatter from the host view; the content view becomes the direct child of _UIModernBarButton. The host view is still 44pt minimum._UIModernBarButton) reserves the slot, not the customView. UIKit sizes the host using:RNNUIBarButtonItem.mm — without explicit constraints, React mounts asynchronously, the customView's intrinsic size starts at zero, the host reserves zero width, the bar lays out, then React reports its real size and the host has to relayout. The visible artifact is the button "popping in" or being misplaced after the push transition's snapshot already captured the wrong frame.tintColor set on the bar item or bar applies to the system image inside the host view; it does not propagate into a React customView. Color the React content explicitly.Practical debugging:
po [self.navigationItem.rightBarButtonItems.firstObject valueForKey:@"_view"] in lldb, or with View Debugger → uncheck "Show layers only" to see the private classes.hidesSharedBackground = NO with a customView that paints its own chrome (double-decoration clips/overlaps).References (public API only — internals are observed, not documented):
The tab bar can auto-minimize during scroll.
UITabBarController.tabBarMinimizeBehavior — .automatic, .never, .onScrollDown, .onScrollUp.setNeedsUpdateOfTabBarMinimizeBehavior() — re-evaluate.RNN handling: Not yet exposed. Would be a new option on bottomTabs.
UIToolbar on iOS 26UIToolbar is a real UIView (unlike UIBarButtonItem). Approximate internal hierarchy on iOS 26:
UIToolbar
├── _UIBarBackground (bar-wide Liquid Glass material;
│ configured via UIToolbarAppearance)
│ └── _UIBackdropView / glass layers
│ └── _UIBarBackgroundShadowView (1pt hairline; controlled by shadowImage / shadowColor)
└── _UIToolbarContentView
└── _UIButtonBarStackView (horizontal stack of toolbar items)
├── _UIModernBarButton (item host — see 7b for layer breakdown)
├── _UIModernBarButton
├── ... fixed/flexible spaces become layout gaps in the stack ...
└── (optional) _UIBarItemGroupPlatter
└── two or more _UIModernBarButton sharing one platter
(only when items are in the same UIBarButtonItemGroup)
What's actually public and load-bearing on iOS 26:
UIToolbarAppearance (standard / compact / scrollEdge) drives _UIBarBackground. Setting barTintColor / backgroundImage on UIToolbar directly is silently overridden by Liquid Glass unless appearance.backgroundEffect = nil.configureWithDefaultBackground on iOS 26 produces glass. To get an opaque fill: configureWithOpaqueBackground plus backgroundEffect = nil plus explicit backgroundColor. This mirrors what BottomTabsAppearancePresenter.mm does for the tab bar.hidesSharedBackground = YES. The 44pt host-view sizing race applies identically.UIBarButtonItemGroup lets adjacent items render under one shared platter (visually grouped pill). customizationIdentifier opts the toolbar into the user-customization sheet (iPadOS).scrollEdgeAppearance matters here too. When a scroll view is attached, the toolbar fades to transparent at the scroll edge using UIToolbar.scrollEdgeAppearance. Pre-iOS-26 this was iPad-only for many cases; iOS 26 applies it consistently.Display mode and customization (iOS 26 / iPadOS 26):
UIToolbar.displayMode — .automatic, .expanded, .compact. Drives whether items spread out or collapse into an overflow menu.UIBarButtonItem.menuRepresentation — the menu UIKit shows when the item is hoisted into the overflow control under .compact.UIToolbar.beginCustomizingItems(...) / endCustomizingItems — programmatic entry into the user-customization sheet for movable/optional groups.RNN handling:
RNN does not expose UIToolbar as a first-class options surface today. Toolbar-shaped behavior in this repo comes from the navigation controller's bottom bar via RNNStackController and is configured indirectly through stack options. Any new toolbar feature should:
ToolbarPresenter) mirroring TopBarPresenter's appearance pattern.UIToolbarAppearance only — never direct barTintColor / backgroundImage.UIBarButtonItemGroup when the option models a logical cluster (e.g. "primary actions") so the platter coalesces correctly.hidesSharedBackground defaults for React custom views, same as RNNUIBarButtonItem.mm does today.References:
UIToolbarUIToolbarAppearanceUIBarButtonItemGroupUINavigationController.preferredTransition — control push/pop animation style (iOS 26 expansion).UIViewController.preferredTransition — zoom transitions.RNN handling: Not exposed. Stack push/pop currently uses defaults.
iOS 26 ships SF Symbols 7. Bar buttons that use system images get the new variants automatically. Custom symbol configurations should re-test on iOS 26.
Animated symbols are part of the iOS 26 bar story:
NSSymbolEffect family — .bounce, .pulse, .variableColor, .replace, .breathe, .scale, .appear, .disappear, .wiggle (iOS 18+; new variants in 26).UIImageView produced by UIKit, or use UIView.addSymbolEffect(_:options:animated:) on the host view returned by UIBarButtonItem.value(forKey: "_view") (private — prefer using UIButton with a configured image inside a custom bar item).UIButton glass configurationsUIButton.Configuration got first-class glass factories in iOS 26. Anything RNN renders that's *not* a bar button (custom views inside a screen, overlays, modal headers, bottom accessories) should adopt these instead of hand-rolling chrome.
UIButton.Configuration.glass() — translucent Liquid Glass pill
UIButton.Configuration.prominentGlass() — tinted, more saturated variant
UIButton.Configuration.plain()
UIButton.Configuration.gray()
UIButton.Configuration.tinted()
UIButton.Configuration.filled()
UIButton.Configuration.borderless()
On iOS 26 the legacy configurations (plain / gray / tinted / filled / borderless) automatically repaint with the Liquid Glass material — you don't opt in, you opt *out* via UIDesignRequiresCompatibility.
Configuration knobs that affect build-up:
cornerStyle — .fixed / .dynamic / .capsule / .small / .medium / .large. .dynamic adopts concentric corners (see §15).buttonSize — .mini / .small / .medium / .large.baseBackgroundColor / baseForegroundColor — tint multiplier on glass.Approximate internal hierarchy for a configuration-based button on iOS 26:
UIButton (configuration-based)
├── _UIButtonBackgroundView (the platter / glass body)
│ ├── UIVisualEffectView (UIGlassEffect — see §13)
│ └── tint overlay (CALayer)
└── _UIButtonContentStackView
├── UIImageView (leading or trailing image)
├── UILabel (title)
└── UILabel (subtitle, when set)
RNN handling: Not exposed as an option today. RNN doesn't render its own button chrome inside screens — that's the React side's job — but if RNN ever needs a system-styled control (e.g. a "Done" button on a custom modal header it builds natively), use UIButton.Configuration.glass() rather than custom drawing.
References:
UIGlassEffect and UIGlassContainerEffect (public Liquid Glass API)The entire Liquid Glass material is exposed publicly. This is the API to use whenever RNN needs custom glass chrome — floating overlays, bottom accessories, custom navigation extensions, modal grabbers.
UIGlassEffect — UIVisualEffect subclass
UIGlassEffect.Style.regular — default frosted glass
UIGlassEffect.Style.clear — thinner, more transparent variant
UIGlassEffect.tintColor — multiplied tint
UIGlassContainerEffect — wraps multiple glass views; they morph/merge when adjacent
UIVisualEffectView(effect: UIGlassEffect()) — host
Behavioral rules:
UIVisualEffectViews with UIGlassEffect placed inside the same UIGlassContainerEffect will visually merge into a single platter when they touch or overlap. This is what produces the "morphing" you see when a search bar collapses into a button, or when tabs minimize into a single pill.tintColor is multiplied, not painted — fully saturated colors look pastel. Use bold colors only when you want a noticeably tinted glass.Build-up:
UIVisualEffectView (effect: UIGlassEffect)
├── _UIVisualEffectBackdropView (CAFilter blur + refraction)
├── _UIVisualEffectSubview (tint overlay)
└── contentView (your content; goes here, not on the effect view directly)
RNN handling: Not used yet. Any future custom chrome (e.g. a bottomAccessory host, a custom modal grabber, a floating action overlay) should be a UIVisualEffectView with UIGlassEffect, not a UIView with a manually configured UIBlurEffect. Pre-iOS-26 RNN can fall back to UIBlurEffectStyle.systemMaterial via the existing availability pattern.
References:
UIGlassEffectUIGlassContainerEffectUIVisualEffectViewUINavigationItem.style — navigator / browser / editoriOS 26 introduces three navigation item styles that reshape the entire navigation bar's internal layout. This is one of the bigger build-up changes in 26.
UINavigationItem.Style.navigator — default; classic nav title + leading/trailing items
UINavigationItem.Style.browser — URL-bar-like layout with a centered integrated field
UINavigationItem.Style.editor — document editor; renamable title + subtitle + badge
Related properties (only meaningful when style ≠ .navigator):
UINavigationItem.documentProperties: UIDocumentProperties? — file URL, subtitle, badge displayed in editor style.UINavigationItem.renameDelegate — inline rename UI for editor style.UINavigationItem.titleMenuProvider — context menu when tapping the title (iOS 16+, but actually visible by default in browser/editor styles on 26).How the build-up changes:
.navigator — standard _UINavigationBarContentView with title label centered..browser — _UINavigationBarContentView swaps the title slot for an integrated URL field (UISearchTextField-shaped), with leading and trailing item clusters under shared platters..editor — adds a vertical stack: title (renamable) + subtitle (file path) + badge, plus a primary action slot at the trailing edge.RNN handling: Not exposed. A future RNN option could surface topBar.style: 'navigator' | 'browser' | 'editor'. Editor style is the more interesting one for document-shaped apps; browser style fits Wix preview-style flows.
References:
UINavigationItem.StyleUIDocumentPropertiesUICornerConfiguration and concentric cornersConcentric corners are a foundational iOS 26 design rule: a child element's corner radius should equal its parent's radius minus the inset, so curves stay visually parallel. Apple's own bar items, sheets, and buttons obey this; mixing fixed cornerRadius with a concentric container looks visibly wrong on 26.
UICornerConfiguration.uniformCornerRadius(_:) // fixed radius
UICornerConfiguration.uniformCornerConfiguration(_:) // with corner style (capsule, etc.)
UICornerConfiguration.concentric(minimum:) // matches parent's curvature, floored at minimum
UIView.cornerConfiguration: UICornerConfiguration? // applies to the view's layer
Rule of thumb: anything painted inside a glass element should be .concentric(minimum: small) rather than .uniformCornerRadius(N). The system already uses concentric corners for bar item platters, sheet corners that morph with the device screen radius, and tab bar item shapes.
RNN handling: Not exposed. Any future RNN-native custom chrome that nests inside a glass element (e.g. a React custom view sitting inside an iOS 26 platter that RNN draws) should apply .cornerConfiguration = .concentric(...) on the wrapping UIView so it inherits the platter's curvature.
References:
UISheetPresentationController iOS 26 changesRNN modals route through UISheetPresentationController when configured. iOS 26 changes its presentation in three meaningful ways:
cornerConfiguration replaces preferredCornerRadius for finer control. Sheets can now have asymmetric corners and use .concentric(minimum:) to match the device's screen radius — the result is the visible "corner morph" when the sheet animates from the small detent to medium/large.UISheetPresentationController.Detent.custom) need to play nicely with this.Related: UISheetPresentationController.prefersGrabberVisible still controls the grabber; the grabber now uses Liquid Glass material.
RNN handling: RNN exposes modal presentation through stack options. iOS 26 sheet behavior surfaces automatically through UIKit defaults — but the "sheet over tab bar" change can visually regress apps that expected the pre-26 layout. If users report it, the fix is to adjust the detent or presentation context, not to fight UIKit.
References:
UISheetPresentationControllerdeveloper.apple.com page; check WWDC25 sessions for sample patterns.TopBarPresenter + RNNTopBarOptions. Bottom tab → BottomTabsAppearancePresenter / RNNBottomTabsController + RNNBottomTabsOptions. Bar buttons → RNNUIBarButtonItem + RNNButtonOptions.lib/src/interfaces/Options.ts. Document semantics, iOS-only marker, iOS 26 minimum.*Options.mm (use the existing [XParser parse:dict key:@"..."] pattern). Add to mergeOptions:.if (@available(iOS 26.0, *)) { ... }. Honor UIDesignRequiresCompatibility if behavior would diverge for legacy-design apps.playground/src/screens/ exercising the option, both visible and toggle states.playground/e2e/ using device.getPlatform() === 'ios' and an iOS version check. Follow existing baseline-then-action screenshot patterns.website/docs/api/options-*.mdx.if (@available(iOS 26.0, *)) and the property name (e.g. backgroundEffect, hidesSharedBackground, preferredSearchBarPlacement) — see if RNN already has a branch.git log --oneline -- ios/<file>.mm | head -20) — most iOS 26 regressions cluster.UIDesignRequiresCompatibility: if the bug only happens with the new design, the fix must not break compatibility mode.| Area | File(s) | Last touched PR(s) |
|------|---------|-------------------|
| Custom React bar buttons (Platter, centering, lifecycle) | RNNUIBarButtonItem.mm, RNNReactButtonView.mm | #8300 |
| Tab item title misplaced on first layout | RNNBottomTabsController.mm (rnn_cycleAllTabsThenRestoreInitialSelection) | #8245, #8254, #8255 |
| Tab bar background color / glass | BottomTabsAppearancePresenter.mm | #8263, #8288 |
| Search bar placement | UIViewController+RNNOptions.mm, RNNSearchBarPlacement.mm | #8183, #8211 |
| Scroll edge effect on top bar | top bar options | #8281, #8239, #8207 |
| iPad back navigation (iOS 26) | nav controller | #8277 |
| drawBehind default on floating tab bar | RNNBottomTabsOptions.mm (-shouldDrawBehind) | — |
Take wix/ios26-navigation from the repository into ~/.claude/skills for personal
use, or into .claude/skills inside a project.
The agent identifies a skill by the name field in its header. Two skills with the
same name cannot sit side by side — one of them will be ignored.