CU-868frkzum Fixed issue with broken onboarding screens.

[ucswift]

Summary by CodeRabbit

• Style

  • Refreshed onboarding with centered layout, consistent spacing, and improved typography.
  • Adaptive colors for light/dark mode for better readability.

• Refactor

  • More stable onboarding list rendering to reduce layout shifts and improve scrolling performance.

• Documentation

  • Removed an outdated analytics migration guide.

[coderabbitai]

Walkthrough

Deleted an analytics migration doc, adjusted onboarding UI to use StyleSheet and color-scheme aware text colors, added FlashList sizing props and layout wrapper, updated a test comment, and expanded/changed exports in src/components/ui/index.tsx.

Changes

Cohort / File(s)	Summary
Documentation cleanup ANALYTICS_MIGRATION.md	Deleted migration documentation file.
Onboarding UI / layout / theming src/app/onboarding.tsx	Rewrote onboarding items to use a static StyleSheet and useColorScheme-based text colors (via useMemo); replaced className usage with inline/styles; wrapped FlashList in a View with minHeight; added estimatedItemSize and getItemType; centralized icon color.
Tests (comment only) src/app/__tests__/onboarding.test.tsx	Updated test comment to reference FlashList instead of FlatList; no assertion or logic changes.
UI exports surface src/components/ui/index.tsx	Added re-exports: ./button, ./pressable, ./text; removed Pressable from the named re-exports from react-native while keeping other existing exports.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• CU-868ex18rd Expo 53 update. #69 — Modifies src/components/ui/index.tsx exports and related UI/provider files; likely related to the export surface changes in this PR.

Poem

I nibble at pixels, a rabbit in code,
FlashList lined pathways make onboarding glow.
Colors that shift when the night meets the day,
Exports arranged so components can play.
The migration doc hopped off — lighter we go! 🐇✨

Pre-merge checks and finishing touches

❌ 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%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title Check	✅ Passed	The title succinctly identifies the primary focus of the changeset—fixing broken onboarding screens—and includes the related issue identifier for traceability. It clearly communicates the main intent without delving into secondary updates like documentation removal or export adjustments. This conciseness ensures that reviewers and future readers immediately understand the PR’s purpose. Therefore, it aligns with guidelines for a clear and specific title.

✨ Finishing touches

• 📝 Generate Docstrings

🧪 Generate unit tests

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch develop

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between f29f287 and e7e5018.

📒 Files selected for processing (1)

• src/app/onboarding.tsx (4 hunks)

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

• src/app/onboarding.tsx

---

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

🧪 Early access (Sonnet 4.5): enabled

We are currently testing the Sonnet 4.5 model, which is expected to improve code review quality. However, this model may lead to increased noise levels in the review comments. Please disable the early access features if the noise level causes any inconvenience.

Note:

• Public repositories are always opted into early access features.
• You can enable or disable early access features from the CodeRabbit UI or by updating the CodeRabbit configuration file.

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

[coderabbitai]

Actionable comments posted: 2

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between ea54cc2 and f29f287.

📒 Files selected for processing (4)

• ANALYTICS_MIGRATION.md (0 hunks)
• src/app/__tests__/onboarding.test.tsx (1 hunks)
• src/app/onboarding.tsx (3 hunks)
• src/components/ui/index.tsx (1 hunks)

💤 Files with no reviewable changes (1)

• ANALYTICS_MIGRATION.md

🧰 Additional context used

📓 Path-based instructions (6)

**/*.{ts,tsx}

📄 CodeRabbit inference engine (.cursorrules)

**/*.{ts,tsx}: Write concise, type-safe TypeScript code
Use camelCase for variable and function names
Use TypeScript for all components and favor interfaces for props and state
Avoid using any; use precise types
Use React Navigation for navigation and deep linking following best practices
Handle errors gracefully and provide user feedback
Implement proper offline support (caching, queueing, retries)
Use Expo SecureStore for sensitive data storage
Use zustand for state management
Use react-hook-form for form handling
Use react-query for data fetching and caching
Use react-native-mmkv for local storage
Use axios for API requests

**/*.{ts,tsx}: Write concise, type-safe TypeScript code
Use camelCase for variable and function names
Use TypeScript for all components, favoring interfaces for props and state
Avoid using any; strive for precise types
Ensure support for dark mode and light mode
Handle errors gracefully and provide user feedback
Use react-query for data fetching
Use react-i18next for internationalization
Use react-native-mmkv for local storage
Use axios for API requests

Files:

• src/app/onboarding.tsx
• src/components/ui/index.tsx
• src/app/__tests__/onboarding.test.tsx

**/*.tsx

📄 CodeRabbit inference engine (.cursorrules)

**/*.tsx: Use functional components and React hooks instead of class components
Use PascalCase for React component names
Use React.FC for defining functional components with props
Minimize useEffect/useState usage and avoid heavy computations during render
Use React.memo for components with static props to prevent unnecessary re-renders
Optimize FlatList with removeClippedSubviews, maxToRenderPerBatch, and windowSize
Provide getItemLayout to FlatList when items have consistent size
Avoid anonymous functions in renderItem or event handlers; define callbacks with useCallback or outside render
Use gluestack-ui for styling where available from components/ui; otherwise, style via StyleSheet.create or styled-components
Ensure responsive design across screen sizes and orientations
Use react-native-fast-image for image handling instead of the default Image where appropriate
Wrap all user-facing text in t() from react-i18next for translations
Support dark mode and light mode in UI components
Use @rnmapbox/maps for maps or navigation features
Use lucide-react-native for icons directly; do not use the gluestack-ui icon component
Use conditional rendering with the ternary operator (?:) instead of &&

**/*.tsx: Use functional components and hooks over class components
Ensure components are modular, reusable, and maintainable
Ensure all components are mobile-friendly, responsive, and support both iOS and Android
Use PascalCase for component names
Utilize React.FC for defining functional components with props
Minimize useEffect, useState, and heavy computations inside render
Use React.memo for components with static props to prevent unnecessary re-renders
Optimize FlatList with removeClippedSubviews, maxToRenderPerBatch, and windowSize
Use getItemLayout for FlatList when items have consistent size
Avoid anonymous functions in renderItem or event handlers to prevent re-renders
Ensure responsive design for different screen sizes and orientations
Optimize image handling using rea...

Files:

• src/app/onboarding.tsx
• src/components/ui/index.tsx
• src/app/__tests__/onboarding.test.tsx

src/**

📄 CodeRabbit inference engine (.cursorrules)

src/**: Organize files by feature, grouping related components, hooks, and styles
Directory and file names should be lowercase and hyphenated (e.g., user-profile)

Files:

• src/app/onboarding.tsx
• src/components/ui/index.tsx
• src/app/__tests__/onboarding.test.tsx

src/components/ui/**/*.tsx

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

Use gluestack-ui components from components/ui; if unavailable, style via StyleSheet.create or styled-components

Files:

• src/components/ui/index.tsx

**/*.{test,spec}.{ts,tsx}

📄 CodeRabbit inference engine (.cursorrules)

**/*.{test,spec}.{ts,tsx}: Create Jest tests for all generated components, services, and logic
Ensure tests run without errors and fix failing tests

Files:

• src/app/__tests__/onboarding.test.tsx

src/**/*.test.{ts,tsx}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

src/**/*.test.{ts,tsx}: Create and use Jest tests to validate all generated components
Generate tests for all components, services, and logic; ensure tests run without errors

Files:

• src/app/__tests__/onboarding.test.tsx

🧬 Code graph analysis (1)

src/app/onboarding.tsx (1)

__mocks__/react-native.ts (1)

• useColorScheme (37-37)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

• GitHub Check: test

🔇 Additional comments (4)

src/components/ui/index.tsx (2)

4-4: LGTM! New component exports align with onboarding usage.

The addition of internal component exports (button, pressable, text) properly expands the public API surface and is correctly used in the onboarding flow.

Also applies to: 12-12, 15-15

---

19-19: Ensure internal Pressable is API-compatible with React Native’s
• src/components/settings/item.tsx:4 and src/components/notifications/NotificationButton.tsx:6 import Pressable from @/components/ui.
• Confirm that src/components/ui/pressable.tsx forwards the same props, refs and behavior (onPress, style, hitSlop, etc.) as RN’s Pressable.

src/app/__tests__/onboarding.test.tsx (1)

216-218: LGTM! Test comment accurately reflects FlashList migration.

The comment update correctly reflects that the onboarding component now uses FlashList instead of FlatList, while maintaining the same testID reference.

src/app/onboarding.tsx (1)

184-185: LGTM! FlashList performance props are correctly configured.

The addition of estimatedItemSize={width} and getItemType={() => 'onboarding-item'} properly optimizes FlashList rendering and view recycling for this homogeneous list of onboarding items.

[ucswift]

Approve

[github-actions]

This PR is approved.