feat(native): Add React Native support for Breadcrumb - #3610
Merged
Conversation
Implements .native.tsx files for the Breadcrumb and BreadcrumbItem components, replacing throwBladeError stubs with real native rendering using cross-platform Blade primitives (BaseBox, Text, BaseLink). Key native adaptations: - Added explicit flexDirection="row" on all horizontal containers (RN defaults to column) - Removed HTML-semantic as props (nav/ol/li/span) and CSS list styles - Added native tests covering default render, isCurrentPage, showLastSeparator, onClick Co-Authored-By: Claude <noreply@anthropic.com>
rohitr-raz
requested review from
anuraghazra,
kamleshchandnani,
ravikumar-rajagopalan,
rohankokane-dev,
saurabhdaware,
saurav12 and
swapnil-kr1
as code owners
June 26, 2026 10:25
🦋 Changeset detectedLatest commit: 48dd59f The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
Contributor
|
🤖 Slash AI Review has been triggered. View execution logs |
Collaborator
🛡️ Coverage ReportSummaryFull Coverage Details |
![rzp-slash-public[bot]](https://avatars.githubusercontent.com/u/7713209?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
✨ Agentic PR Review ✨
UI Review
🔗 Storybook: Preview
❌ 1 failed
| Check | Problem |
|---|---|
| Breadcrumb React Native implementation | No screenshots / videos found in PR_BODY (required for react native components) |
CI / Sanity
✅ 13 passed · ❌ 1 failed · ⏭️ 1 skipped
| Check | Problem |
|---|---|
| Validate Source Code | Still running — all substantive steps (lint, TypeScript checks, Svelte checks, builds) have completed successfully; only post-cleanup steps remain. Suggestion: Expected to succeed shortly — all meaningful validation has already passed. |
Passing checks (13)
⚠️ Missing changeset bump for @razorpay/blade (packages/blade was modified)
Usage
import { Breadcrumb, BreadcrumbItem } from '@razorpay/blade/components';
<Breadcrumb size="medium" color="primary" showLastSeparator accessibilityLabel="Navigation">
<BreadcrumbItem href="/home" icon={HomeIcon}>Home</BreadcrumbItem>
<BreadcrumbItem href="/products">Products</BreadcrumbItem>
<BreadcrumbItem href="/current" isCurrentPage>Current Page</BreadcrumbItem>
</Breadcrumb>| {...metaAttribute({ name: MetaConstants.BreadcrumbItem })} | ||
| > | ||
| {child} | ||
| <BaseBox> |
Contributor
There was a problem hiding this comment.
🟠 [MAJOR] · code-quality-critique · confidence: 8/10
Problem: Separator wrapper BaseBox is not hidden from accessibility on native
Suggestion: Add {...makeAccessible({ hidden: true })} to the separator wrapper BaseBox (line 67) to match the web implementation and prevent screen readers from announcing the '/' separator characters.
Contributor
There was a problem hiding this comment.
✨ Agentic Resolution ✨: Auto Comment Resolution Triggered (View Logs)
![rzp-slash[bot]](https://github.githubassets.com/images/gravatars/gravatar-user-420.png){kind=avatar}
Add makeAccessible({ hidden: true }) to separator wrapper BaseBox in
Breadcrumb.native.tsx to match web implementation and prevent screen
readers from announcing the '/' separator characters.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Contributor
|
Contributor
|
|
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes and found 1 potential issue.
Bugbot Autofix is ON, but it could not run because the service account is not on the team's cloud agent allowlist. To enable Bugbot Autofix, have a team admin update the allowlist in the Cursor dashboard.
Reviewed by Cursor Bugbot for commit 2d5b448. Configure here.
swapnil-kr1
reviewed
Jul 10, 2026
swapnil-kr1
left a comment
swapnil-kr1
left a comment
Contributor
There was a problem hiding this comment.
Do we need : .claude/artifacts/Breadcrumb folder also. If not needed please remove
| {...getStyledProps(rest)} | ||
| {...metaAttribute({ name: MetaConstants.Breadcrumb })} | ||
| {...makeAnalyticsAttribute(rest)} | ||
| {...makeAccessible({ label: accessibilityLabel })} |
Contributor
There was a problem hiding this comment.
Navigation landmark is dropped on native. Web renders the outer box as as="nav" (a navigation landmark); here the outer box only gets label, with no role. This PR's own docs (rn-discovery-report.md and rn-migration-plan.md step 4) explicitly call for replacing as="nav" with makeAccessible({ role: 'navigation' }) — so the code and the plan now disagree, and the snapshot confirms no accessibilityRole is emitted.
Caveat: RN's accessibilityRole has no navigation value, so role: 'navigation' may not map cleanly on native. That's fine — but then it should be a conscious, documented accepted-difference (e.g. keep accessibilityLabel and note the landmark can't be expressed on RN), not a silent drop that contradicts the plan. Please either wire up the intended role/state or add a short comment recording the a11y trade-off.
| flexDirection="row" | ||
| alignItems="center" | ||
| gap="spacing.2" | ||
| {...metaAttribute({ name: MetaConstants.BreadcrumbItem })} |
Contributor
There was a problem hiding this comment.
The current page isn't conveyed to assistive tech on native. Web marks the current item with makeAccessible({ current: ariaCurrent }) (aria-current="page"); here the item wrapper omits it, so the current page is only visually distinct (Text vs link) with no programmatic signal. Consider accessibilityState={{ selected: true }} (or an equivalent via makeAccessible) on the wrapper when the child's isCurrentPage is set, to preserve parity with web's aria-current.
| {child} | ||
| <BaseBox {...makeAccessible({ hidden: true })}> | ||
| {index !== React.Children.count(children) - 1 && ( | ||
| <Separator size={size} color={color} /> |
Contributor
There was a problem hiding this comment.
Intended? The non-last (intermediate) separator here passes color={color}, but web passes only <Separator size={size} /> (no color) — so on web intermediate separators always fall to surface.text.gray.muted, while on native a color="white" breadcrumb renders them as surface.text.staticWhite.muted. Native's behavior is arguably more correct, but it's a silent web/native divergence for the white color. Please confirm this is deliberate — and if so, consider fixing web to match (or matching web here) so the two platforms don't drift.
Contributor
Author
There was a problem hiding this comment.
made changes in native to match the web for now
Contributor
Author
will remove it |
…ents - Document the accepted a11y trade-off that RN has no `navigation` landmark role (web uses `as="nav"`); keep accessibilityLabel as the closest affordance - Convey current page to assistive tech via `selected` state (parity with web's `aria-current="page"`) - Match web separator behavior: intermediate separator no longer receives `color` (falls back to gray.muted), removing the silent web/native divergence Co-authored-by: Cursor <cursoragent@cursor.com>
Contributor
|
(Review Cancelled - Superseded by a new run) |
Co-authored-by: admin <admin>
Contributor
|
(Review Cancelled - Superseded by a new run) |
Contributor
|
(Review Cancelled - Superseded by a new run) |
Contributor
|
(Review Cancelled - Superseded by a new run) |
Contributor
|
(Review Cancelled - Superseded by a new run) |
Contributor
|
(Review Cancelled - Superseded by a new run) |
Contributor
|
(Review Cancelled - Superseded by a new run) |
swapnil-kr1
previously approved these changes
Jul 10, 2026
Contributor
There was a problem hiding this comment.
✨ Agentic PR Review ✨
Status: Approved ✅
UI Review
✅ 4 passed
Passing checks (4)
| Check | Screenshot |
|---|---|
| ✅ Breadcrumb Basic story |  |
| ✅ Breadcrumb Sizes story |  |
| ✅ Breadcrumb Colors story |  |
| ✅ Breadcrumb Wrap Multiline story |  |
Usage
import { Breadcrumb, BreadcrumbItem } from '@razorpay/blade/components';
<Breadcrumb>
<BreadcrumbItem accessibilityLabel="Home" icon={HomeIcon} href="/home" />
<BreadcrumbItem href="/dashboard">Dashboard</BreadcrumbItem>
<BreadcrumbItem isCurrentPage href="/settlements">
Settlements
</BreadcrumbItem>
</Breadcrumb>
rzp-slash-public
Bot
added
the
rcore:eligible-for-auto-approval
… [resolved by agent] Co-authored-by: admin <admin>
rzp-slash-public
Bot
dismissed stale reviews from swapnil-kr1 and themself
via
July 10, 2026 17:31
78eb725
Contributor
|
(Review Cancelled - Superseded by a new run) |
Contributor
|
🤖 Slash AI Review has been triggered. View execution logs |
Contributor
There was a problem hiding this comment.
✨ Agentic PR Review ✨
UI Review
🔗 Storybook: Preview
✅ 1 passed
Passing checks (1)
| Check | Screenshot |
|---|---|
| ✅ Breadcrumb native rendering |  |
CI / Sanity
✅ 15 passed · ⏭️ 1 skipped
Passing checks (15)
⚠️ Blade Bundle Size / 'Generate PR Report' check is still IN_PROGRESS — stuck on the 'Update Bundle Size Data' step (Danger step not yet reached). Logs unavailable while job is running. This is a transient state; re-check once the run completes to confirm it passes.
Usage
import { Breadcrumb, BreadcrumbItem } from '@razorpay/blade/components';
<Breadcrumb>
<BreadcrumbItem href="/home">Home</BreadcrumbItem>
<BreadcrumbItem href="/products" isCurrentPage>Products</BreadcrumbItem>
</Breadcrumb>
swapnil-kr1
approved these changes
Jul 13, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
.native.tsx) forBreadcrumbandBreadcrumbItemcomponentsthrowBladeErrorstubs with real platform-specific renderingBaseBox,Text, andBaseLinkChanges
Breadcrumb.native.tsx— replaced stub with fullReact.forwardRefimplementationBreadcrumbItem.native.tsx— replaced stub;isCurrentPagebranch usesBaseBox + Text + Icon, link branch usesBaseLink(already native)__tests__/Breadcrumb.native.test.tsx— 8 test cases covering default render,isCurrentPage,showLastSeparator,onClick,color="white", size variants, data-analytics attributesKey Native Adaptations
flexDirection="row"to all horizontalBaseBoxcontainers (RN defaults to column)asprops (nav,ol,li,span) — not applicable in RNstyle={listStyleNone}— CSS list styles irrelevant in RNaria-currentomitted (no direct RN equivalent)Verification
yarn types:typecheck:native)🤖 Generated with Claude Code
Note
Low Risk
Scoped UI migration on native-only files using established Blade primitives; web behavior and shared types are unchanged.
Overview
Replaces native stubs that threw
throwBladeErrorwith workingBreadcrumb.native.tsxandBreadcrumbItem.native.tsx, so the compound API works on React Native using existingBaseBox,Text, andBaseLink(no new styled files).Breadcrumbkeeps context, separators,showLastSeparator, ref forwarding, meta/analytics props, and usesmakeAccessiblefor the nav label and hidden separator wrappers; horizontal layouts setflexDirection="row"instead of webas="nav"/ol/liand list CSS.BreadcrumbItemmirrors web:isCurrentPagerenders icon +Text; otherwiseBaseLinkwith opacity tokens and analytics.Adds
Breadcrumb.native.test.tsx(snapshots, current page, separator, pressonClick, size/color variants, analytics) plus Jest snapshots. Also adds.claude/artifacts/Breadcrumb/discovery and migration docs (planning only).Reviewed by Cursor Bugbot for commit 2d5b448. Bugbot is set up for automated code reviews on this repo. Configure here.