implement state management and bottom navigation

[Retsomm]

Summary by CodeRabbit

• New Features

  • Tab-based navigation with five screens: Home, Learn, AI Teacher, Chat, Profile
  • Gated app entry that checks auth and language selection, with redirects to onboarding or language selection as needed
  • Placeholder screens for each tab and a custom animated bottom tab bar
  • Persistent language selection store with hydration tracking

• Chores

  • Added persistence/state dependencies and updated env example with a publishable key entry

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 73a9c008-ce9d-4780-ad25-576ec2f706d1

📥 Commits

Reviewing files that changed from the base of the PR and between ed37285 and f451e5d.

📒 Files selected for processing (2)

• .env.example
• components/bottom-tab-bar.tsx

✅ Files skipped from review due to trivial changes (1)

• .env.example

🚧 Files skipped from review as they are similar to previous changes (1)

• components/bottom-tab-bar.tsx

---

📝 Walkthrough

Walkthrough

The PR adds a persisted Zustand language store, rewrites Index and LanguageSelection to gate routing on auth and language hydration/selection, adds a TabsLayout with a custom BottomTabBar, introduces a TabPlaceholderScreen, and creates five placeholder tab screens. It also updates an image import and .env.example with a Clerk key.

Changes

Language Selection, Auth Gating & Tab Navigation

Layer / File(s)	Summary
Language persistence store store/UseLanguageStore.ts, package.json	Zustand store created with async storage persistence for selectedLanguageId under key lingua-language-storage. Includes hydration tracking and environment-aware storage fallback for Expo web contexts. Dependencies zustand and @react-native-async-storage/async-storage added.
Language selection and root routing gate app/LanguageSelection.tsx, app/index.tsx	LanguageSelection initializes from persisted selection and persists user choice before navigating home. Index rewritten as a conditional gate: returns null while auth or language store hydrate, redirects unsigned users to /onboarding, redirects users without selected language to /LanguageSelection, and otherwise routes to /home.
Tab navigation components and layout app/(tabs)/_layout.tsx, components/bottom-tab-bar.tsx, components/tab-placeholder-screen.tsx	BottomTabBar implements a rounded, safe-area-aware bar with an animated active indicator and per-route icons/labels. TabPlaceholderScreen provides a centered card layout with safe-area padding. TabsLayout gates on auth and language readiness then renders five named tab routes with the custom tab bar.
Tab screen placeholders app/(tabs)/home.tsx, app/(tabs)/learn.tsx, app/(tabs)/ai-teacher.tsx, app/(tabs)/chat.tsx, app/(tabs)/profile.tsx	Five tab screens each render TabPlaceholderScreen with distinct titles and static subtitles indicating future features.
Environment configuration and asset update .env.example, constants/images.ts	Adds EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY placeholder to .env.example. Updates earthCropped image import filename/casing from earth-cropped.png to EarthCropped.png.

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

Possibly related PRs

• Retsomm/react-native-lingua#4: Overlaps on Clerk auth gating and profile screen changes; this PR removes the previous app/profile.tsx.
• Retsomm/react-native-lingua#5: Related language-selection navigation and constants/images.ts edits that overlap with this PR.
• Retsomm/react-native-lingua#1: Earlier onboarding routing changes in app/index.tsx connected to this PR’s routing gate.

Poem

🐰
A little store burrows in the ground,
Keeps my tongue safe and sound,
Gates swing open once keys are right,
Tabs hop forward into light,
Springy bar spins—navigation’s delight.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately summarizes the main changes: implementing state management (Zustand language store with persistence) and bottom navigation (BottomTabBar component with tabs layout).
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ 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 dev

---

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

[coderabbitai]

Actionable comments posted: 2

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In @.env.example:
- Line 1: Replace the production-style placeholder value for
EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY with a non-production/test or neutral token
(e.g., start with pk_test_ or use YOUR_CLERK_PUBLISHABLE_KEY) so the
.env.example does not suggest using a live key; update the value of
EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY in the example file accordingly.

In `@components/bottom-tab-bar.tsx`:
- Around line 75-79: The Animated.View is using NativeWind className; remove the
className prop and move those visual styles into the component StyleSheet (e.g.,
add a new style like activeCircleContainer in the same StyleSheet used for
styles.activeCircle), then apply them via the style prop combined with existing
styles.activeCircle and the transform: [{ translateX: indicatorX }] (preserve
pointerEvents="none"); update the JSX for the Animated.View (the instance using
styles.activeCircle and indicatorX) to merge [styles.activeCircleContainer,
styles.activeCircle, { transform: [{ translateX: indicatorX }] }].

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 01c57413-e4ab-41d5-a961-7c81350340c5

📥 Commits

Reviewing files that changed from the base of the PR and between 8785803 and ed37285.

⛔ Files ignored due to path filters (2)

• assets/images/EarthCropped.png is excluded by !**/*.png
• package-lock.json is excluded by !**/package-lock.json

📒 Files selected for processing (15)

• .env.example
• app/(tabs)/_layout.tsx
• app/(tabs)/ai-teacher.tsx
• app/(tabs)/chat.tsx
• app/(tabs)/home.tsx
• app/(tabs)/learn.tsx
• app/(tabs)/profile.tsx
• app/LanguageSelection.tsx
• app/index.tsx
• app/profile.tsx
• components/bottom-tab-bar.tsx
• components/tab-placeholder-screen.tsx
• constants/images.ts
• package.json
• store/UseLanguageStore.ts

💤 Files with no reviewable changes (1)

• app/profile.tsx