…ial carousel Rive animations cp-7.81.0 (#31547)

## **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**

```gherkin
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**

- [x] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile
Coding
Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [x] I've completed the PR template to the best of my ability
- [x] I've included tests if applicable
- [x] I've documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [x] I've applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

#### Performance checks (if applicable)

- [x] I've tested on Android
  - Ideally on a mid-range device; emulator is acceptable
- [x] I've tested with a power user scenario
- Use these [power-user
SRPs](https://consensyssoftware.atlassian.net/wiki/spaces/TL1/pages/edit-v2/401401446401?draftShareId=9d77e1e1-4bdc-4be1-9ebb-ccd916988d93)
to import wallets with many accounts and tokens
- [x] I've instrumented key operations with Sentry traces for production
performance metrics
- See [`trace()`](/app/util/trace.ts) for usage and
[`addToken`](/app/components/Views/AddAsset/components/AddCustomToken/AddCustomToken.tsx#L274)
for an example

For performance guidelines and tooling, see the [Performance
Guide](https://consensyssoftware.atlassian.net/wiki/spaces/TL1/pages/400085549067/Performance+Guide+for+Engineers).

## **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.

<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> **Low Risk**
> Single conditional around Rive mounting in the tutorial carousel;
behavior is unchanged except avoiding concurrent animations on Android.
> 
> **Overview**
> Fixes an **Android crash** in the Perps “Learn the basics” tutorial by
ensuring only one native **Rive** animation is mounted at a time.
> 
> `ScrollableTabView` keeps every tab’s children in the tree, so every
screen with `riveArtboardName` used to mount `<Rive autoplay>` together.
The change adds `index` in the screen map and renders the animation only
when **`currentTab === index`**, so swiping or tapping Continue unmounts
the previous instance before the next one loads. No intended UI change
on iOS.
> 
> <sup>Reviewed by [Cursor Bugbot](https://cursor.com/bugbot) for commit
17b73bc. Bugbot is set up for automated
code reviews on this repo. Configure
[here](https://www.cursor.com/dashboard/bugbot).</sup>
<!-- /CURSOR_SUMMARY -->