feat(navbar): native segment rows under the navbar

Merged
RI
4d ago
+992-31

Summary

  • New segments option on setNavbar: 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' picks segmented for ≤4 items, scroll otherwise.
  • Rows extend the navbar container, the reported top/navbarHeight insets, the edge blur, and hide-on-scroll distance.
  • New navbarSegmentSelect event { groupId, id, index }. Rows keep their views when only selectedId changes, 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

  • xcodebuild iOS 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


View with [code]smith Autofix with [code]smith
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.