Skip to content

feat(nav): move profile to top-right avatar, 3-tab native nav#291

Merged
KishParikh13 merged 1 commit into
v2from
feat/v2-tab-nav-profile-header
May 28, 2026
Merged

feat(nav): move profile to top-right avatar, 3-tab native nav#291
KishParikh13 merged 1 commit into
v2from
feat/v2-tab-nav-profile-header

Conversation

@KishParikh13

Copy link
Copy Markdown
Collaborator

What

Simplifies native navigation from 4 tabs to 3 (Home / Explore / Feed) by moving Profile out of the bottom tab bar into a consistent avatar button in the top-right of every tab header.

Motivation: simplify navigation (and the home screen) ahead of the MSC launch — the demo feedback was that the app felt busy. The web build already does this (avatar in WebHeader); this brings native in line.

Changes

  • TabHeader.tsx — new showProfile prop (default true) renders the user's avatar as a /profile entry point, shown on Home, Explore and Feed. Native-only (Platform.OS !== 'web'); on the profile screen itself it's passed false.
  • (tabs)/_layout.tsx — profile Tabs.Screen set to href: null: removes the native tab icon while keeping /profile mounted and routable. Removed the now-dead Avatar tab-icon + import.

Deliberately scoped to avoid colliding with other in-flight work

  • No web routing/nav changes. Profile stays inside (tabs), so on web it still renders within WebHeader / WebBottomNav — pixel-identical. This keeps the PR clear of the in-flight web-nav redesign branch (redesign-web-nav-and-desktop). The only shared file is (tabs)/_layout.tsx; the overlap is one line (the Explore header), a trivial merge.
  • /profile route preserved — WebBottomNav and SettingsPanel links keep working.
  • Branched cleanly off v2 for independent mergeability (no dependency on draft PRs).

Verification

  • tsc --noEmit on the frontend: 0 errors in the changed files (8 pre-existing baseline errors elsewhere, unrelated).
  • ⚠️ Not yet smoke-tested in the iOS simulator (sandbox couldn't complete npm install). Recommend a quick simulator pass to confirm: 3 tabs render, avatar appears top-right on all three, tapping it opens /profile, and the profile screen's own header shows "You" + settings with no avatar.

UX note

Profile opens as a tab-style screen (no back-arrow) — consistent with its current behavior (you return via the tabs). If we'd prefer a pushed screen with a back arrow, that's a follow-up (it touches root-stack routing + web chrome, so I kept it out of this PR).

🤖 Generated with Claude Code

Simplify native navigation from 4 tabs to 3 (Home / Explore / Feed) by
removing Profile from the bottom tab bar and surfacing it as a consistent
avatar button in the top-right of every tab header.

- TabHeader: new `showProfile` prop (default true) renders the user avatar
  as a `/profile` entry point. Native-only — web keeps its existing
  WebHeader / WebBottomNav profile entry untouched.
- (tabs)/_layout: profile screen set to `href: null` so /profile stays
  routable (web's WebBottomNav + SettingsPanel still link to it) while
  dropping the native tab icon. Avatar is hidden on the profile screen's
  own header.

No web routing changes, to stay clear of the in-flight web-nav redesign.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@cloudflare-workers-and-pages

Copy link
Copy Markdown

Deploying chinmaya-janata with  Cloudflare Pages  Cloudflare Pages

Latest commit: 91130c9
Status: ✅  Deploy successful!
Preview URL: https://271bd306.project-janatha.pages.dev
Branch Preview URL: https://feat-v2-tab-nav-profile-head.project-janatha.pages.dev

View logs

@KishParikh13 KishParikh13 merged commit 12de82c into v2 May 28, 2026
1 check passed
@KishParikh13 KishParikh13 deleted the feat/v2-tab-nav-profile-header branch June 3, 2026 14:56
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant