feat: implement file-based navigation with expo-router — replace hardcoded App.tsx

[Josue19-08]

🔖 Title

Implement expo-router navigation — replace single hardcoded screen in `App.tsx`

---

📄 Description

Currently `App.tsx` renders exactly one screen unconditionally (`InvestScreen`). `expo-router` is already in `package.json` but the app entry point is still `node_modules/expo/AppEntry.js` — expo-router is never activated. `@react-navigation/native` is installed but neither `@react-navigation/native-stack` nor `@react-navigation/bottom-tabs` are installed, so there is no working navigator.

The result: `PayScreen`, `SignIn`, `CreateAccountScreen`, and any future screens are completely unreachable. The BottomBar tab switching does nothing — `activeTab` state in `MainLayout` is set but never used to change what's rendered.

This issue wires up expo-router properly with a bottom-tab layout and registers all existing screens as real navigable routes.

---

✅ Tasks to complete

• Update `package.json` `"main"` field from `"node_modules/expo/AppEntry.js"` to `"expo-router/entry"`
• Create `app/_layout.tsx` — root layout wrapping the app in any global providers (safe area, etc.)
• Create `app/(tabs)/_layout.tsx` — bottom tab navigator with tabs: Home (InvestScreen), Pay (PayScreen), Profile, Notifications. Use icons from `@expo/vector-icons` (already installed)
• Create `app/(tabs)/index.tsx` — renders `InvestScreen`
• Create `app/(tabs)/pay.tsx` — renders `PayScreen`
• Create `app/(tabs)/profile.tsx` — placeholder (will be built in separate issue)
• Create `app/(tabs)/notifications.tsx` — renders `NotificationsPanel` or a dedicated full-screen notifications view
• Create `app/sign-in.tsx` and `app/create-account.tsx` — auth screens outside the tab group
• Remove `App.tsx` (or reduce it to nothing — expo-router takes over)
• Remove `activeTab` state and conditional tab logic from `MainLayout.tsx` — navigation is now handled by expo-router
• Update `BottomBar.tsx` — replace custom tab switching with `useRouter` from expo-router or remove it entirely (expo-router provides its own tab bar via `Tabs` component)
• Install missing package: `expo install expo-router` (ensure version matches Expo SDK)

---

📚 Documentation/context for AI

https://github.com/TrustUp-app/TrustUp-Frontend/tree/main/docs

Files to create:

• `app/_layout.tsx`
• `app/(tabs)/_layout.tsx`
• `app/(tabs)/index.tsx`
• `app/(tabs)/pay.tsx`
• `app/(tabs)/profile.tsx`
• `app/(tabs)/notifications.tsx`
• `app/sign-in.tsx`
• `app/create-account.tsx`

Files to modify:

• `package.json` (main entry)
• `components/shared/MainLayout.tsx` (remove tab state)
• `components/shared/BottomBar.tsx` (integrate with router or remove)

---

🗒️ Additional notes

• The tab bar should have 4 tabs: Home (house icon), Pay (credit-card icon), Notifications (bell icon), Profile (person icon)
• Auth screens (`sign-in`, `create-account`) live outside the `(tabs)` group — they should not show the tab bar
• Use `expo-router`'s `` component for the tab navigator — do not install `@react-navigation/bottom-tabs` separately
• The `NotificationsPanel` slide-in panel behavior should be replaced by a proper full-screen route at `/notifications`
• Keep `MainLayout.tsx` for the header only — remove the ScrollView wrapper and tab state from it

[Achievers-sketch]

I’d like to implement this by setting up Expo Router, file-based navigation, tab layouts, route structure, and seamless screen navigation.

[morelucks]

Hello,

I’d love to take this issue on. I’m a smart contract and full-stack developer with experience across OnlyDust, Drips Waves 1–5, and the GrantFox beta campaign.

My stack includes Rust, Soroban, Cairo, Solidity, and TypeScript. I can deliver a clean, tested, and well-documented solution within 24 hours of assignment.

Happy to start immediately.

[kimanicode]

Hi, I'd like to take this issue. I'll wire up expo-router as the entry point, add the root and tabs layouts, register all existing screens (Invest, Pay, Profile, Notifications, sign-in, create-account) as routes, and clean up the now-unused activeTab logic in MainLayout and BottomBar. Please assign it to me, thanks.

[grantfox-oss]

🦊 GrantFox — @kimanicode has been assigned to this issue as part of the Official Campaign | FWC26 campaign!

Next steps:

1. Open a Pull Request referencing this issue (e.g., Closes #57)
2. Your PR will be reviewed by the TrustUp-app maintainers

Good luck! Track your progress on GrantFox.