fix(mobile): Browser page no longer logs a duplicate key warning

[tris203]

Problem

On the mobile Browser page, BrowserAddressBar and PreviewStreamWebView are siblings in the same fragment and both use key={tab.tabId}. React requires keys to be unique among siblings, so every dev render with a tab logs:

Encountered two children with the same key, tab_2_…. Keys should be unique so that components maintain their identity across updates.

On Android dev builds this shows as a red toast over the page as soon as the Browser page opens. It has been there since the page was added in #15328.

Expected: opening the Browser page logs no key warning.

Change

Prefix the two keys so they are unique among siblings: address:${tab.tabId} and stream:${tab.tabId}. Both still change with the tab id, so switching tabs remounts the address bar (dropping a half-typed URL) and the stream view exactly as before. Two lines in apps/mobile/src/features/browser/BrowserPreviewRouteScreen.tsx; nothing else in apps/mobile/src/features/browser/ has two siblings sharing a key.

Scope and approval

No prior issue or discussion: this is a very small, focused fix for an obvious bug. Two siblings sharing a key is a React usage error with a deterministic warning, the fix is a key rename, and it changes no product behavior.

Verification

Environment: Android emulator (Pixel 9, API 37) running the dev client against Metro from this branch, paired to an isolated dev server. One thread with two server browser tabs (https://example.com/ and https://www.iana.org/help/example-domains).

Steps: open the thread, tap "2 tabs open" to open the Browser page.

• Before (the two key lines reverted to main): the toast appears, and adb logcat -s ReactNativeJS shows Encountered two children with the same key three times for the selected tab's id.
• After (this branch, app relaunched): no toast, and logcat has zero same key lines after opening the page.
• Tab switch, after: choosing the other tab from the Tabs menu switches the title, address bar and stream to https://example.com/, still with zero same key lines.

Before	After	After, switched tab

Checks run: pnpm exec tsc --noEmit in apps/mobile, vp lint apps/mobile/src/features/browser, and vp fmt --check apps/mobile/src/features/browser, all passing. Lint reports one existing unused-import warning for FILL_PREVIEW_VIEWPORT in this file, which this PR leaves alone.

Not checked: iOS. The warning comes from React's reconciler, so it is not platform-specific, but only Android was run. No test added, since a test for a key rename would only mirror the implementation.

Claude Opus 5.5 in Claude Code, running in T3 Code.

[macroscopeapp]

Approvability

Verdict: Approved at d3d6ff9

Macroscope's review found this PR approvable — This is a focused two-line React key fix that makes sibling keys unique while preserving tab-switch remount behavior. It has no broader runtime, schema, deployment, product-default, or static-analysis impact.

Notes:

• Diff unchanged. Approvability was decided on eligibility alone.

^{You can add or adjust custom eligibility rules. Learn more.}

Dismissing prior approval to re-evaluate d3d6ff9

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

• Configuration used: Path: .coderabbit.config.ts
• Review profile: CHILL
• Plan: Advanced
• Run ID: b87c16e8-8448-4014-840a-b81ba2db49eb

---

📥 Commits

Reviewing files that changed from the base of the PR and between 511d20c and 49f2790.

---

📒 Files selected for processing (1)

• apps/mobile/src/features/browser/BrowserPreviewRouteScreen.tsx

---

Included review availability: This review used your included allowance. Your plan provides up to 10 included reviews per hour; 9 remain after this review.

---

---

📝 Walkthrough

Walkthrough

The browser address bar and preview stream now use distinct React keys with address: and stream: prefixes, respectively.

Changes

Browser preview keys

Layer / File(s)	Summary
Assign distinct address and stream keys apps/mobile/src/features/browser/BrowserPreviewRouteScreen.tsx	BrowserAddressBar uses an address:-prefixed key. PreviewStreamWebView uses a stream:-prefixed key.

Priority: ⬇️ Low

Estimated code review effort: 1 (Trivial) | ~5 minutes

Change: Bug fix

Suggested reviewers: maria-rcks

---

Merge Risk: ⚪ Minimal · up to 49f27

The address bar and preview stream now have separate tab-scoped identities, addressing the duplicate-key warning without an identified merge-blocking risk.

Pre-merge checks · 4

Passed checks (4 passed)

Check name	Status	Explanation
Title check		The title clearly and concisely describes the primary change: removing the duplicate React key warning on the mobile Browser page.
Description check		The description covers the problem, expected behavior, implementation, scope justification, verification steps, before-and-after results, screenshots, checks run, limitations, and agent attribution. I…
Linked Issues check		Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check		Check skipped because no linked issues were found for this pull request.

---

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create a new PR

---

• Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

---

_{Comment @coderabbitai help to get the list of available commands.}