feat: replace loading animation with Rive animation (DO NOT MERGE)

[vinnyhoward]

Description

Replaces the static native splash screen with a Rive-based animated splash screen, creating a seamless Duolingo-style transition from app launch into the main interface.

Problem: The previous loading state showed a static fox image followed by a plain loading spinner with no visual continuity. There was also a white flash between the native splash screen and the first React Native render on slower devices.

Solution:

• Introduced a new FoxLoader component that plays a Rive state machine animation, the fox builds up, enters an idle "look around" loop while app services initialize, then plays a reverse/exit animation before the app is revealed
• Added expo-splash-screen to keep the native splash visible until the first React Native frame is ready, eliminating the white flash
• Added a static fox PNG fallback that displays instantly on mount (matching the native splash fox size exactly), which is swapped out for the Rive animation once it begins playing, ensuring zero visual gap between native splash and animation
• ControllersGate now uses an absoluteFill overlay with an Animated fade-out (300ms +250ms grace period) so the transition into the app is smooth

Changelog

CHANGELOG entry: Replaced the static splash screen loading state with a Rive-based animated fox transition for a smoother app launch experience

Related issues

Fixes: https://consensyssoftware.atlassian.net/browse/TMCU-443

Manual testing steps

Feature: Animated splash screen

  Scenario: user launches the app cold
    Given the app is not running
    When the user opens the app
    Then the native splash screen appears immediately
    And the fox animation begins playing seamlessly (no white flash)
    And the fox enters an idle look-around loop while app services load
    And once the app is ready, the fox plays an exit animation
    And the main app screen fades in after the exit animation completes

  Scenario: user launches the app with slow services
    Given app services take longer than usual to initialize
    When the user opens the app
    Then the fox continues its idle loop until services are ready
    And the exit animation only fires after both the fox is idle AND services are ready

Screenshots/Recordings

Android

Small Device

android_small.mov

Medium Device

android_medium.mov

Large Device

android_large.mov

Transition into Lock Screen

android_to_lock_screen.mov

iOS

Small Device

ios_small.mov

Medium Device

ios_medium.mov

Large Device

ios_large.mov

Transition into Lock Screen

ios_to_lock_screen.mov

Before

~

After

~

Pre-merge author checklist

• I've followed MetaMask Contributor Docs and MetaMask Mobile Coding Standards.
• I've completed the PR template to the best of my ability
• I've included tests if applicable
• I've documented my code using JSDoc format if applicable
• I've applied the right labels on the PR (see labeling guidelines). Not required for external contributors.

Pre-merge reviewer checklist

• I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed).
• I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots.

---

Note

Medium Risk
Changes app startup/splash rendering and native initialization timing on both iOS and Android; regressions could manifest as blank screens, stuck splash, or visual flashes during cold start.

Overview
Replaces the previous startup loading UI with a Rive-driven animated splash (FoxLoader) that bridges from native splash to React Native, including a static-fox fallback, controlled exit trigger, and a timeout/error fallback to ensure the app still reveals.

Updates ControllersGate to always render app content when services are ready, while keeping a full-screen animated FoxLoader overlay that fades out only after both app services readiness and animation completion.

Adjusts native splash behavior across platforms: adds expo-splash-screen and calls preventAutoHideAsync() in index.js, updates Android 12+ splash styling/resources (new values-v31 themes and centered splash icon), removes Android SplashActivity, and migrates iOS launch UI from LaunchScreen.xib to SplashScreen.storyboard with a matching dynamic background color in AppDelegate.

Also bumps Android/iOS build numbers (and Bitrise version variables) to 4530 and updates iOS app icon asset contents for appearance variants.

^{Reviewed by Cursor Bugbot for commit ca86893. Bugbot is set up for automated code reviews on this repo. Configure here.}

[github-actions]

CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes.

[socket-security]

Review the following changes in direct dependencies. Learn more about Socket for GitHub.

Diff	Package	Supply Chain Security	Vulnerability	Quality	Maintenance	License
	npm/​expo-splash-screen@​0.29.24

View full report

[cursor]

Cursor Bugbot has reviewed your changes and found 1 potential issue.

There are 2 total unresolved issues (including 1 from previous review).

^{❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, have a team admin enable autofix in the Cursor dashboard.}

^{Reviewed by Cursor Bugbot for commit d1f15de. Configure here.}

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
88.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[github-actions]

✅ E2E Fixture Validation — Schema is up to date
12 value mismatches detected (expected — fixture represents an existing user).
View details

[github-actions]

🔍 Smart E2E Test Selection

• Selected E2E tags: SmokeAccounts, SmokeConfirmations, SmokeIdentity, SmokeNetworkAbstractions, SmokeNetworkExpansion, SmokeTrade, SmokeWalletPlatform, SmokeCard, SmokePerps, SmokeRamps, SmokeMultiChainAPI, SmokePredictions, SmokeSeedlessOnboarding, FlaskBuildTests
• Selected Performance tags: @PerformanceLaunch, @PerformancePreps, @PerformancePredict, @PerformanceAssetLoading, @PerformanceOnboarding
• Risk Level: high
• AI Confidence: 82%

click to see 🤖 AI reasoning details

E2E Test Selection:
This PR contains 100 changed files with several high-impact areas:

1. ControllersGate.tsx + FoxLoader.tsx (CRITICAL): The app startup/splash screen has been significantly refactored. ControllersGate now uses a new FoxLoader component with Rive animation, a 5-second timeout fallback, and a two-condition gate (animation done AND app services ready). This affects EVERY E2E test since all tests go through app startup. Any regression here would break all test suites.

2. .detoxrc.js (CRITICAL): E2E test configuration changes - affects how all tests are run, including timeout settings, retry logic, and device configurations.

3. MainNavigator.js: Core navigation file that registers all screens and routes. Changes here affect navigation across all features.

4. Perps components (multiple): PerpsMarketDetailsView, PerpsOrderBookView, PerpsOrderRedirect, PerpsSelectModifyActionView, PerpsLeverageBottomSheet, PerpsTutorialCarousel, CandleStreamChannel, perpsConfig - extensive Perps UI changes → SmokePerps required. Per tag description, SmokePerps also requires SmokeWalletPlatform (Trending section) and SmokeConfirmations.

5. Predict components (multiple): FeaturedCarouselCard, FeaturedCarouselSportCard, PredictChipList, PredictGameDetailsContent, PredictMarketMultiple/Single/Outcome, PredictPicks, PredictPositionDetail, PredictPreviewSheet, PredictSportCardFooter - extensive Predict UI changes → SmokePredictions required. Per tag description, SmokePredictions also requires SmokeWalletPlatform and SmokeConfirmations.

6. Bridge components: BridgeView, SwapsConfirmButton, useBridgeConfirm, useSwapBridgeNavigation → SmokeTrade + SmokeConfirmations (per tag dependency rules).

7. Earn components: AssetOverviewClaimBonus (Merkl bonus claim), TronStakingLearnMoreModal, MusdConversionAssetListCta → SmokeTrade (staking/earn flows).

8. OptinMetrics: Onboarding metrics opt-in screen changes affect all onboarding flows → SmokeSeedlessOnboarding, SmokeWalletPlatform.

9. NetworkVerificationInfo: Network verification UI → SmokeNetworkAbstractions.

10. Android native files: Splash screen drawables, styles, manifest changes → affects Android app startup.

11. AdvancedChart: TradingView chart component used in Token Details and Perps → SmokeWalletPlatform, SmokePerps.

Given the breadth of changes (100 files), the critical nature of ControllersGate/FoxLoader affecting all test startup, and the extensive changes across Perps, Predict, Bridge, Earn, and navigation - a full test suite run is warranted. The ControllersGate change alone (new splash animation with timeout logic) could cause flakiness across all tags if the animation doesn't complete properly in test environments.

Performance Test Selection:
Performance tests are warranted for several reasons: 1) FoxLoader/ControllersGate changes directly impact app launch time - the new Rive animation with 5-second timeout and two-condition gate (animation + services ready) could affect cold/warm start times (@PerformanceLaunch). 2) Extensive Perps component changes (PerpsMarketDetailsView, PerpsOrderBookView, PerpsLeverageBottomSheet, CandleStreamChannel) could impact Perps trading performance (@PerformancePreps). 3) Multiple Predict component changes (FeaturedCarouselCard, PredictChipList, PredictGameDetailsContent, PredictMarketMultiple/Single) could affect prediction market loading performance (@PerformancePredict). 4) AdvancedChart and AssetOverview/Price changes affect asset loading and rendering performance (@PerformanceAssetLoading). 5) OptinMetrics changes affect the onboarding flow performance (@PerformanceOnboarding).

View GitHub Actions results

[vinnyhoward]

Closing in favor of this branch for cleaner history #29003