Design Account Tab & Profile Routes

[leoAshu]

🚀 Summary

Introduced a navigable flow from the Account tab to a dedicated Profile screen, including the ability to view and edit user details.

The update ensures users can manage their profile seamlessly within the app using a structured flow:

• Tap avatar/name on Account tab → navigates to /profile/index
• View profile details with an Edit Profile button
• Edit and update fields via /profile/updateProfile, with validation and UI feedback

🧩 Related Issues / Tasks

• Closes [FEATURE] Implement Account Tab & Profile Routes #28

🛠️ Type of Change

• 🐞 Bug fix
• ✨ New feature
• 🧨 Breaking change
• 🔨 Enhancement/Refactor
• 📝 Documentation
• 📜 Other (please describe):

✅ Checklist

• The code is formatted with Prettier (npm run format or npx prettier --write .)
• PR references a linked Issue or Task number
• Tested on both iOS and Android devices/emulators
• No unnecessary logs or commented-out code
• UI changes, if any, have been reviewed visually
• All tests are passing (if applicable)
• Added or updated documentation where necessary

📸 Screenshots / Videos (UI changes only)

Account

Profile

Edit Profile

🧪 Test Plan

• Tap on avatar section on Account screen → navigates to Profile
• Confirm user details are displayed correctly
• Tap Edit Profile → navigates to edit form pre-filled with existing data
• Modify fields and save → success toast shown and data reflects updated info
• Checked navigation stack behavior (push/pop) and UI consistency across light and dark mode
• Validated error handling and required field validations