chore: Refactor Predict tabs for consistency (#29010)

<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->

## **Description**

This PR refactors the tab components to use design system components. It
polishes the UI of the feature.

## **Changelog**

<!--
If this PR is not End-User-Facing and should not show up in the
CHANGELOG, you can choose to either:
1. Write `CHANGELOG entry: null`
2. Label with `no-changelog`

If this PR is End-User-Facing, please write a short User-Facing
description in the past tense like:
`CHANGELOG entry: Added a new tab for users to see their NFTs`
`CHANGELOG entry: Fixed a bug that was causing some NFTs to flicker`

(This helps the Release Engineer do their job more quickly and
accurately)
-->

CHANGELOG entry: null

## **Related issues**

Fixes:

## **Manual testing steps**

```gherkin
Feature: Predictions market details tabs (design system tab bar)

  Scenario: user switches tabs on a prediction market details screen
    Given Predictions is available and I am on a prediction market or game details screen that shows the details tab bar

    When user taps a different tab in the details tab bar
    Then the newly selected tab is highlighted with the shared tab styling (including the animated underline) and the details content updates to match that tab
```

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

### **After**

<img width="780" height="780" alt="Screenshot 2026-04-18 at 5 37 42 PM"
src="https://github.com/user-attachments/assets/00883700-e9dd-463f-bbba-6450909eec01"
/>




## **Pre-merge author checklist**

- [ ] 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).
- [ ] 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](https://jsdoc.app/) format
if applicable
- [ ] 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)

- [ ] 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](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
- [ ] 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**
> Low risk UI refactor: switches to a shared design-system `TabsBar` and
removes a styling prop; main risk is minor layout/selection regressions
(including active index clamping) on the market details screen.
> 
> **Overview**
> Refactors `PredictMarketDetailsTabBar` to use the shared design-system
`TabsBar` (animated underline/scroll behavior) instead of custom
`Pressable` tabs, and removes the `tabTwStyle` customization hook from
callers.
> 
> Adds active-tab index clamping to avoid out-of-range/null values and
updates tests to account for `TabsBar` rendering details (duplicate
labels) and to trigger presses via tab `testID`s.
> 
> <sup>Reviewed by [Cursor Bugbot](https://cursor.com/bugbot) for commit
b0cee08. Bugbot is set up for automated
code reviews on this repo. Configure
[here](https://www.cursor.com/dashboard/bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

Author: amandaye0h

app/components/UI/Predict/components/PredictGameDetailsContent/PredictGameDetailsContent.tsx

@@ -227,7 +227,6 @@ const PredictGameDetailsContent: React.FC<PredictGameDetailsContentProps> = ({
                 tabs={tabs}
                 activeTab={activeTab}
                 onTabPress={handleTabPress}
-                tabTwStyle="flex-1"
               />
             )}
             {showChips && (

app/components/UI/Predict/views/PredictMarketDetails/components/PredictMarketDetailsTabBar/PredictMarketDetailsTabBar.test.tsx

@@ -41,17 +41,18 @@ describe('PredictMarketDetailsTabBar', () => {
   });
 
   it('renders all tab labels', () => {
-    const { getByText } = render(
+    const { getAllByText } = render(
       <PredictMarketDetailsTabBar
         tabs={threeTabs}
         activeTab={0}
         onTabPress={mockOnTabPress}
       />,
     );
 
-    expect(getByText('Positions')).toBeOnTheScreen();
-    expect(getByText('Outcomes')).toBeOnTheScreen();
-    expect(getByText('About')).toBeOnTheScreen();
+    // Tab renders a hidden + visible label copy for layout; allow duplicates per label.
+    expect(getAllByText('Positions').length).toBeGreaterThanOrEqual(1);
+    expect(getAllByText('Outcomes').length).toBeGreaterThanOrEqual(1);
+    expect(getAllByText('About').length).toBeGreaterThanOrEqual(1);
   });
 
   it('renders correct testID for each tab', () => {
@@ -72,15 +73,17 @@ describe('PredictMarketDetailsTabBar', () => {
   });
 
   it('calls onTabPress with correct index when tab is pressed', () => {
-    const { getByText } = render(
+    const { getByTestId } = render(
       <PredictMarketDetailsTabBar
         tabs={twoTabs}
         activeTab={0}
         onTabPress={mockOnTabPress}
       />,
     );
 
-    fireEvent.press(getByText('Outcomes'));
+    fireEvent.press(
+      getByTestId(getPredictMarketDetailsSelector.tabBarTab('outcomes')),
+    );
 
     expect(mockOnTabPress).toHaveBeenCalledWith(1);
   });
@@ -99,34 +102,4 @@ describe('PredictMarketDetailsTabBar', () => {
     ).toBeOnTheScreen();
     expect(queryByText('Positions')).not.toBeOnTheScreen();
   });
-
-  describe('tabTwStyle prop', () => {
-    it('produces different tab styles when tabTwStyle is provided', () => {
-      const { getByTestId: getWithStyle } = render(
-        <PredictMarketDetailsTabBar
-          tabs={twoTabs}
-          activeTab={0}
-          onTabPress={mockOnTabPress}
-          tabTwStyle="flex-1"
-        />,
-      );
-
-      const { getByTestId: getWithoutStyle } = render(
-        <PredictMarketDetailsTabBar
-          tabs={twoTabs}
-          activeTab={0}
-          onTabPress={mockOnTabPress}
-        />,
-      );
-
-      const tabWithStyle = getWithStyle(
-        getPredictMarketDetailsSelector.tabBarTab('positions'),
-      );
-      const tabWithoutStyle = getWithoutStyle(
-        getPredictMarketDetailsSelector.tabBarTab('positions'),
-      );
-
-      expect(tabWithStyle.props.style).not.toEqual(tabWithoutStyle.props.style);
-    });
-  });
 });

app/components/UI/Predict/views/PredictMarketDetails/components/PredictMarketDetailsTabBar/PredictMarketDetailsTabBar.tsx

@@ -1,14 +1,9 @@
-import React, { memo } from 'react';
-import { Pressable } from 'react-native';
+import React, { memo, useMemo } from 'react';
+import { Box } from '@metamask/design-system-react-native';
 import {
-  Box,
-  BoxAlignItems,
-  BoxFlexDirection,
-  Text,
-  TextColor,
-  TextVariant,
-} from '@metamask/design-system-react-native';
-import { useTailwind } from '@metamask/design-system-twrnc-preset';
+  TabsBar,
+  type TabItem,
+} from '../../../../../../../component-library/components-temp/Tabs';
 import {
   getPredictMarketDetailsSelector,
   PredictMarketDetailsSelectorsIDs,
@@ -19,54 +14,64 @@ export interface PredictMarketDetailsTabBarProps {
   tabs: { label: string; key: PredictMarketDetailsTabKey }[];
   activeTab: number | null;
   onTabPress: (tabIndex: number) => void;
-  tabTwStyle?: string;
 }
 
+const clampActiveIndex = (
+  activeTab: number | null,
+  tabCount: number,
+): number => {
+  if (tabCount === 0) {
+    return 0;
+  }
+  if (activeTab === null || activeTab < 0) {
+    return 0;
+  }
+  if (activeTab >= tabCount) {
+    return tabCount - 1;
+  }
+  return activeTab;
+};
+
+/**
+ * Market / game details tabs — same `TabsBar` + `Tab` stack as {@link PredictFeedTabBar}
+ * (body md typography, animated underline, horizontal scroll when needed).
+ */
 const PredictMarketDetailsTabBar = memo(
-  ({
-    tabs,
-    activeTab,
-    tabTwStyle,
-    onTabPress,
-  }: PredictMarketDetailsTabBarProps) => {
-    const tw = useTailwind();
+  ({ tabs, activeTab, onTabPress }: PredictMarketDetailsTabBarProps) => {
+    const tabItems: TabItem[] = useMemo(
+      () =>
+        tabs.map((tab) => ({
+          key: tab.key,
+          label: tab.label,
+          content: null,
+          testID: getPredictMarketDetailsSelector.tabBarTab(tab.key),
+        })),
+      [tabs],
+    );
 
-    return (
-      <Box
-        twClassName="bg-default border-b border-muted pt-4"
-        testID={PredictMarketDetailsSelectorsIDs.TAB_BAR}
-      >
+    const activeIndex = useMemo(
+      () => clampActiveIndex(activeTab, tabs.length),
+      [activeTab, tabs.length],
+    );
+
+    if (tabs.length === 0) {
+      return (
         <Box
-          flexDirection={BoxFlexDirection.Row}
-          alignItems={BoxAlignItems.Center}
-          twClassName="px-3"
-        >
-          {tabs.map((tab, index) => (
-            <Pressable
-              key={tab.key}
-              onPress={() => onTabPress(index)}
-              style={tw.style(
-                'w-1/3 py-3',
-                activeTab === index ? 'border-b-2 border-default' : '',
-                tabTwStyle,
-              )}
-              testID={getPredictMarketDetailsSelector.tabBarTab(tab.key)}
-            >
-              <Text
-                variant={TextVariant.BodyMd}
-                twClassName="font-medium"
-                color={
-                  activeTab === index
-                    ? TextColor.TextDefault
-                    : TextColor.TextAlternative
-                }
-                style={tw.style('text-center')}
-              >
-                {tab.label}
-              </Text>
-            </Pressable>
-          ))}
-        </Box>
+          twClassName="bg-default pt-4"
+          testID={PredictMarketDetailsSelectorsIDs.TAB_BAR}
+        />
+      );
+    }
+
+    return (
+      <Box twClassName="bg-default pt-4">
+        <TabsBar
+          tabs={tabItems}
+          activeIndex={activeIndex}
+          onTabPress={onTabPress}
+          testID={PredictMarketDetailsSelectorsIDs.TAB_BAR}
+          twClassName="!px-3"
+        />
       </Box>
     );
   },