[huhuanming]

Problem

OK-66512: on desktop, the Home pill tab bar can show the wrong width for the selected tab. Load Solana, switch through networks with more tabs (Polygon, Bitcoin), return to Solana, and click 历史记录. The pill only covers "历史记".

The Home pill was drawn by the JS TabBar. It cached each item's layout by index, and on web onLayout comes from a ResizeObserver, which fires only on size changes. When the tab list changes, a tab that only moves keeps the old entry for its new index, so the pill takes another tab's width.

The pager's own tab bar (already used for Home text tabs on narrow native) had no pill style, so wide layouts could not move to it.

Change

nativeTabBar.style.variant: "pill" on iOS, Android and Web:

• One rounded background (indicatorColor) behind the selected item, with label colors blended from inactiveTextColor to activeTextColor. With progress, the leading edge eases out and the trailing edge eases in.
• Geometry always comes from the current item frames. iOS and Android use the layout pass. Web reads live button boxes on every sync and observes item and list resizes. Nothing is cached per index.
• style.indicatorAnimationEnabled (default true). When false, the pill and label colors snap to the selection, which matches the 6.6.4 desktop behavior.
• style.contentMaxWidth (all variants): centers the tab row and toolbar slot; the bar background stays full width.
• style.itemPaddingHorizontal (defaults: text 10, pill 14, others 8) and Web itemHoverBackgroundColor / itemPressedBackgroundColor.
• The new options travel in the existing nativeTabBarConfig JSON, so codegen props and the native component schema are unchanged.
• SPEC: new section "Pill tabs and centered content band".

Verification

Consumer: OneKey desktop dev build (Electron, single runtime), branch feat/home-native-pill-tabs, with this package built and copied into node_modules. Same session and account for both runs. Each step clicks 历史记录, then measures the selected tab and pill boxes over CDP.

Step	Old JS TabBar: 历史记录 / pill (x, width)	Pager pill: 历史记录 / pill (x, width)
Solana, loaded directly	226, 92 / 226, 92	226, 92 / 226, 92
Polygon (5 tabs)	363, 92 / correct on screen	363, 92 / 363, 92
Bitcoin (2 tabs)	161, 92 / —	161, 92 / 161, 92
Back to Solana	226, 92 / 229, 60 (DeFi's width, "历史记")	226, 92 / 226, 92

• With indicatorAnimationEnabled: false, six frames sampled after a tab click all show the pill already on the target with transition: none.
• The toolbar slot and the consumer's anchored filter Popover open at the toolbar button. The sticky tab bar stays pinned while History scrolls.
• jest (16 passed) and bob build pass.

iOS (iPad (A16) simulator, iOS 27.0, local native build)

• The pager's iOS changes compile. The DevSession rebuilt the native shell locally, and the Xcode build succeeded.
• The launcher's user notices all fell back to local builds, so this was not a clean cache hit:
  • WebEmbed download timed out.
  • Shell locator returned HTTP 404.
  • Vendor fetch failed.
• In both iPad layouts (single pane at 820 pt and the landscape split pane), Home matches md, so iOS shows the native text tabs on this new build. Those rendered normally, including item padding, the toolbar and switching between Spot / Perps / DeFi / NFT / History.
• To exercise the native pill path, the variant was temporarily forced (not committed), using a watch-only EVM address:
  • BNB Chain (5 tabs) → History: the pill covers "History".
  • Aleph Zero EVM (2 tabs: Spot, History): History moves from slot 5 to slot 2, and the pill matches it.
  • Back to BNB Chain → History: the pill matches again.
• Once, Avalanche showed a blank Home body after an "OneKeyServer Unknown Error" toast. Reopening it on the committed code (text tabs) loaded normally, so this looks like a transient server response, not the tab bar.
• Android: not compiled or run.

Not covered yet:

• Android changes are not compiled or run.
• No pager-level DOM test. This package's jest preset is react-native, and the web pager throws outside a web DOM runtime.
• The two edited TS files were not Prettier-clean on main; they are left unformatted to keep the diff small.

Consumer change: OneKeyHQ/app-monorepo#14412 (Home switches every width to the pager tab bar).