fix(expo): improve pack selection UX and dynamic API base URL

[mikib0]

Summary

• Pack selection screen: renamed title to "Choose a Pack", refactored to full-screen FlatList with sticky search bar, moved the "ADDING" item card (with image) to the details screen
• Add to pack details screen: now shows the "ADDING" item card at the top; removed the "Change pack" button from the selected pack section
• API / auth client: replaced raw clientEnvs.EXPO_PUBLIC_API_URL access with a getApiBaseUrl() helper that rewrites localhost → 10.0.2.2 on Android emulators
• CatalogItemDetailScreen: added edges={['bottom']} to SafeAreaView

Test plan

• Open any catalog item → tap "Add to Pack" → pack selection screen shows sticky search, no item banner
• Select a pack → details screen shows the "ADDING" banner with image at top, no "Change" button
• Search filters packs correctly while search bar stays fixed
• Android emulator: API calls reach host machine via 10.0.2.2

Summary by CodeRabbit

• New Features

  • Item images now display in catalog item headers when adding items to packs

• Bug Fixes

  • Fixed API connectivity for Android users

• UI/UX Improvements

  • Redesigned pack selection screen with enhanced search functionality and improved empty state messaging (distinct messages when no results found vs. no packs available)
  • Updated interface labels and styling for better clarity and consistency

[coderabbitai]

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro

Run ID: 7d542157-17f7-4557-be08-a2f74fd16650

📥 Commits

Reviewing files that changed from the base of the PR and between 88b966f and 2048cc5.

📒 Files selected for processing (7)

• apps/expo/features/catalog/screens/AddCatalogItemDetailsScreen.tsx
• apps/expo/features/catalog/screens/CatalogItemDetailScreen.tsx
• apps/expo/features/catalog/screens/PackSelectionScreen.tsx
• apps/expo/lib/api/getBaseUrl.ts
• apps/expo/lib/api/packrat.ts
• apps/expo/lib/auth-client.ts
• apps/expo/lib/i18n/locales/en.json

---

Walkthrough

The PR refactors catalog screens with a new header-based item layout and removes unnecessary catalog-detail dependencies from pack selection. It also adds Android-specific API URL handling to rewrite localhost to the emulator bridge address (10.0.2.2).

Changes

Android API Base URL Handling

Layer / File(s)	Summary
API base URL utility and client integration apps/expo/lib/api/getBaseUrl.ts, apps/expo/lib/api/packrat.ts, apps/expo/lib/auth-client.ts	New getApiBaseUrl() utility converts localhost to 10.0.2.2 on Android. This function is integrated into both the Packrat API client and Better-Auth auth client configurations to support the Android emulator.

Catalog Screens UI Refactoring

Layer / File(s)	Summary
AddCatalogItemDetailsScreen header and pack section apps/expo/features/catalog/screens/AddCatalogItemDetailsScreen.tsx	The previous catalog-item card is replaced with a new header layout that displays CatalogItemImage, an "adding" label, and item metadata (name, weight/units, brand). The pack selection section no longer includes a "change pack" action button.
PackSelectionScreen data and layout refactor apps/expo/features/catalog/screens/PackSelectionScreen.tsx	Removes the useCatalogItemDetails hook dependency and restructures the layout: search input and pack-count label move to a fixed top area, FlatList always renders from filtered packs, and empty state switches between "no packs found" (when searching) and a create-pack state (when no search).
CatalogItemDetailScreen SafeAreaView styling apps/expo/features/catalog/screens/CatalogItemDetailScreen.tsx	Adds explicit background color and restricts SafeAreaView safe-area handling to the bottom edge only.
Localization: pack selection label apps/expo/lib/i18n/locales/en.json	Updates packs.packName string from "Pack Name" to "Choose a Pack".

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• PackRat-AI/PackRat#2357: Both PRs update SafeAreaView handling with edges={['bottom']} constraints across catalog screens.
• PackRat-AI/PackRat#2425: Both PRs modify apps/expo/lib/api/packrat.ts authentication and API client setup.

Suggested labels

mobile, api

Suggested reviewers

• Isthisanmol
• andrew-bierman

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/expo-pack-selection-ux

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

ESLint skipped: no ESLint configuration detected in root package.json. To enable, add eslint to devDependencies.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

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