fix(mobile): add translucent status bar

[lawvs]

Introduce a translucent status bar in the mobile application to enhance the visual experience. This change modifies the app configuration and updates the main app component accordingly.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
follow	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Apr 6, 2025 5:14pm

1 Skipped Deployment

Name	Status	Preview	Comments	Updated (UTC)
follow-external-ssr	⬜️ Ignored (Inspect)	Visit Preview		Apr 6, 2025 5:14pm

[follow-reviewer-bot]

Suggested PR Title:

feat(android): enable translucent status bar and update config

Change Summary:
Added translucent status bar for Android and adjusted app configuration for splash screen styling. These changes enhance the visual consistency and functionality of the app interface.

Code Review:

1. apps/mobile/app.config.ts - Line 102

   • Issue: In the android configuration for expo-splash-screen, the newly added backgroundColor: "#00000000" might not be a valid hexadecimal color. The alpha transparency (00 suffix) may not be supported, depending on the platform or configuration. Expo documentation typically suggests using fully opaque colors for splash screens.
   • Recommendation: Verify if #00000000 is supported as a valid background color or replace it with a solid color to ensure compatibility.

2. apps/mobile/src/App.tsx - Line 4

   • Issue: The addition of import { StatusBar } from "expo-status-bar" introduces a dependency on the expo-status-bar package. Ensure that this package is installed and included in the project's dependencies to avoid potential runtime errors.
   • Recommendation: Confirm that expo-status-bar is already installed. If not, add it to package.json and install it with npm install or yarn.

3. apps/mobile/src/App.tsx - Line 22

   • Issue: The StatusBar translucent prop enables transparency but does not specify a fallback behavior or appropriate adjustments for systems with an opaque status bar by default. This could result in UI inconsistencies.
   • Recommendation: Verify that all screens in the app account for the translucent status bar. This might involve adjusting padding or margins to avoid overlapping content with the status bar.

Please address these issues to ensure the functionality and reliability of the updated code.