Description

The Perps "Learn the basics" tutorial carousel crashes on Android when navigating through the screens.

Root cause: ScrollableTabView renders all child tabs simultaneously, which means 4–5 <Rive> components (one per tutorial screen with an animation) are all mounted with autoplay={true} at the same time. On Android, the Rive native renderer cannot handle multiple concurrent GPU-accelerated animation instances and crashes.

Fix: Only mount the <Rive> component for the currently visible tab (currentTab === index). This ensures a single native Rive renderer instance exists at any time. When the user swipes or taps Continue, the previous instance is unmounted and the next one takes its place.

iOS is unaffected because its Metal rendering pipeline handles concurrent Rive instances more gracefully.

Changelog

CHANGELOG entry: Fixed a crash on Android when navigating through the Perps tutorial carousel

Related issues

Fixes: #31540

Manual testing steps

Feature: Perps tutorial carousel stability on Android

  Scenario: user completes the full tutorial without crash
    Given the user has not completed the Perps tutorial
    When user taps Perps and goes through "Learn the Basics of Perps"
    Then the app does not crash
    And all tutorial screens display their Rive animations correctly

  Scenario: user re-enters tutorial from Perps home
    Given the user is on the Perps home screen
    When user scrolls down and taps "Learn the Basics of Perps"
    And user taps Continue through all screens
    Then the app does not crash
    And the user reaches the final screen successfully

Screenshots/Recordings

N/A — no visual change; this is a crash fix. The tutorial screens render identically, only one Rive animation is mounted at a time instead of all simultaneously.

Before

App crashes on Android when navigating through tutorial carousel screens.

After

Tutorial carousel completes without crash on Android.

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.

Performance checks (if applicable)

• I've tested on Android
  • Ideally on a mid-range device; emulator is acceptable
• I've tested with a power user scenario
  • Use these power-user SRPs to import wallets with many accounts and tokens
• I've instrumented key operations with Sentry traces for production performance metrics
  • See trace() for usage and addToken for an example

For performance guidelines and tooling, see the Performance Guide.

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.