feat(navbar): native segment rows under the navbar
Merged
RI
4d ago+992+992+012345678901234567890123456789-31-31-01234567890123456789
Summary
- New
segmentsoption onsetNavbar: rows of native segments drawn under the bar, top to bottom.- iOS:
UISegmentedControl(segmented) or horizontally scrolling capsule buttons (scroll, Liquid Glass on iOS 26, filled/gray before). - Android: Material-style connected segmented buttons or scrolling filter chips (no new dependency).
style: 'auto'pickssegmentedfor ≤4 items,scrollotherwise.
- iOS:
- Rows extend the navbar container, the reported
top/navbarHeightinsets, the edge blur, and hide-on-scroll distance. - New
navbarSegmentSelectevent{ groupId, id, index }. Rows keep their views when onlyselectedIdchanges, so selection animates and scroll position stays. - Example app: "Segment rows" toggle in the Navbar playground.
Motivation: Capgo app settings/app pages show web tab rows under the native navbar (half native, half web). This lets apps move those rows into native chrome.
Test plan
-
xcodebuildiOS build - Android
compileDebugJavaWithJavac testDebugUnitTest -
bun run build(docgen + tsc + rollup) - Example app on iPhone 18 Pro simulator (iOS 26)
- Android emulator visual check
🤖 Generated with Claude Code
Need help on this PR? Tag @codesmith-bot with what you need.
Summary by CodeRabbit
- New Features
- Added configurable segment rows to the navigation bar, with selectable items, optional titles and icons, accessibility labels, and enabled states.
- Choose segmented controls or horizontally scrolling pills, or let the layout adapt to the number of items. Selecting an item reports its group, item, and position.
- The example app now demonstrates segment rows and selection behavior.
- Documentation
- Added API documentation for segment configuration and selection events.