CU-868ex18rd Splash screen changes.

[ucswift]

Summary by CodeRabbit

• Style
  • Updated splash screen visuals with a new image, contain scaling, and a refreshed brand background color.
• Bug Fixes
  • Improved app launch experience by allowing the splash screen to auto-hide, reducing potential startup delays.
• Refactor
  • Simplified splash screen handling to rely on default behavior, removing manual hide logic for a smoother, more consistent startup flow.

[coderabbitai]

Walkthrough

Adds Expo splash configuration and removes runtime splash-screen control. Specifically, config now defines splash image, resize mode, and background color. In app layouts, calls to prevent auto-hide and to hide the splash on auth state changes are removed; no exported signatures change.

Changes

Cohort / File(s)	Summary
Expo splash configuration app.config.ts	Adds splash block: image: ./assets/adaptive-icon.png, resizeMode: contain, backgroundColor: #2484c4. No other logic changes.
Runtime splash handling removal src/app/_layout.tsx, src/app/(app)/_layout.tsx	Removes SplashScreen.preventAutoHideAsync() and deletes debounced SplashScreen.hideAsync() logic tied to auth status. Leaves hasHiddenSplash ref unused; no other flow changes.

Sequence Diagram(s)

sequenceDiagram
  autonumber
  actor User
  participant App as App Runtime
  participant Expo as Expo Splash
  participant Auth as Auth Status

  rect rgba(230,245,255,0.6)
  note over App,Expo: Previous flow (before this PR)
  User->>App: Launch app
  App->>Expo: preventAutoHideAsync()
  App->>Auth: Initialize/auth check
  Auth-->>App: Status (signedIn/signedOut/onboarding)
  App-->>Expo: hideAsync() (debounced)
  Expo-->>User: Hide splash, show UI
  end

  rect rgba(240,255,240,0.6)
  note over App,Expo: New flow (after this PR)
  User->>App: Launch app
  Expo-->>User: Auto-hide per config defaults
  App->>Auth: Initialize/auth check (no splash control)
  Auth-->>App: Status
  App-->>User: Render UI
  end

Loading

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

• CU-868ex18rd Fix for splash screen #65 — Also modifies splash-screen handling in the same layout files, reworking the prevent/hide logic; likely a counterpart or follow-up.

Poem

A cobalt dawn, my ears perk high,
The splash now fades without a sigh.
No tap to hide, no anxious wait—
Config whispers, “open gate.”
I thump hello to cleaner starts,
Hop swift through screens with lighter hearts.
🐇✨

Tip

🔌 Remote MCP (Model Context Protocol) integration is now available!

Pro plan users can now connect to remote MCP servers from the Integrations page. Connect with popular remote MCPs such as Notion and Linear to add more context to your reviews and chats.

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

💡 Knowledge Base configuration:

• MCP integration is disabled by default for public repositories
• Jira integration is disabled by default for public repositories
• Linear integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between aaa2458 and 5d207be.

📒 Files selected for processing (3)

• app.config.ts (1 hunks)
• src/app/(app)/_layout.tsx (0 hunks)
• src/app/_layout.tsx (1 hunks)

💤 Files with no reviewable changes (1)

• src/app/(app)/_layout.tsx

🧰 Additional context used

📓 Path-based instructions (3)

**/*.{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:

• app.config.ts
• src/app/_layout.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/_layout.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/_layout.tsx

🔇 Additional comments (2)

src/app/_layout.tsx (1)

36-36: All manual splash-control calls have been removed

• src/app/_layout.tsx: the only SplashScreen.preventAutoHideAsync() is commented out; no other preventAutoHideAsync() or hideAsync() invocations in production code.
• src/app/(app)/tests/_layout.test.tsx: SplashScreen.hideAsync() is called only within tests (lines 23–25), which is expected for unit tests.
• No hideSplash callbacks or runtime calls to SplashScreen.hideAsync() were found in src/app/(app)/_layout.tsx.
• assets/adaptive-icon.png exists at assets/adaptive-icon.png.

Please proceed with manual QA of cold-start UX on both iOS and Android to ensure there’s no flash-of-blank-content now that splash auto-hide is restored.

app.config.ts (1)

36-40: Unify Brand Colors in app.config.ts

The configuration currently defines two different hex colors across multiple sections, which can lead to inconsistent splash screens and notification theming. Consolidating these values into a single source of truth will improve maintainability and ensure a consistent user experience.

Occurrences of duplicated colors (from rg -nP "#[0-9a-fA-F]{6}" app.config.ts):

• Line 39: splash.backgroundColor: '#2484c4'
• Line 74: adaptiveIcon.backgroundColor: '#2484c4'
• Line 98: expo-splash-screen plugin backgroundColor: '#2a7dd5'
• Line 116: Notification color: '#2a7dd5'

Recommendations:

• Extract a single const BRAND_COLOR = '#2484c4' (or '#2a7dd5', depending on your brand guideline) at the top of app.config.ts.
• Replace all hardcoded instances with BRAND_COLOR.
• Remove plugin-specific overrides so that expo-splash-screen reads from the top-level splash section.
• Align notification icon color to the same BRAND_COLOR (or define a separate constant if you need a distinct accent).

Example refactor snippet:

 // Top of file
-// no brand color constant
+const BRAND_COLOR = '#2484c4';

 export default {
+  splash: {
+    image: './assets/adaptive-icon.png',
+    resizeMode: 'contain',
+    backgroundColor: BRAND_COLOR,
+  },
   updates: { … },
   android: {
     adaptiveIcon: {
       foregroundImage: './assets/adaptive-icon.png',
-      backgroundColor: '#2484c4',
+      backgroundColor: BRAND_COLOR,
     },
     softwareKeyboardLayoutMode: 'pan',
   },
   plugins: [
-    [
-      'expo-splash-screen',
-      {
-        backgroundColor: '#2a7dd5',
-        image: './assets/adaptive-icon.png',
-        imageWidth: 250,
-      },
-    ],
+    ['expo-splash-screen'], // now reads from top-level splash

     {
       icon: './assets/notification-icon.png',
-      color: '#2a7dd5',
+      color: BRAND_COLOR,
       permissions: { … },
     },
   ],
 };

This change centralizes color management and prevents drift between splash screens, adaptive icons, and notifications.

✨ 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

---

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

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

CodeRabbit Commands (Invoked using PR/Issue comments)

Type @coderabbitai help to get the list of available commands.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Status, Documentation and Community

• Visit our Status Page to check the current availability of CodeRabbit.
• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[ucswift]

Approve

[github-actions]

This PR is approved.