fix: react-native-scrollable-tab-view underline style positioning by Prithpal-Sooriya · Pull Request #30133 · MetaMask/metamask-mobile

Prithpal-Sooriya · 2026-05-13T16:53:07Z

Description

move from patch-package to yarn patch
add 1 line style fix

Changelog

CHANGELOG entry: fix: react-native-scrollable-tab-view underline style positioning

Related issues

Fixes: N/A

Manual testing steps

Feature: my feature name

  Scenario: user [verb for user action]
    Given [describe expected initial app state]

    When user [verb for user action]
    Then [describe expected outcome]

Screenshots/Recordings

Before

After

https://www.loom.com/share/282c62335748460bbd8f62d9d86ad987

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.

Note

Medium Risk
Applies a custom patch to a third-party tab view component, changing underline layout math and Android paging/scroll animation behavior, which could affect tab rendering and swipe performance across screens that use it.

Overview
Switches @tommasini/react-native-scrollable-tab-view from a normal dependency to a Yarn-patched dependency and adds the patch file under .yarn/patches/.

The patch adjusts DefaultTabBar underline positioning by introducing optional tabPadding, computing underline width/translate offsets from an effective width, and using underlineStyle instead of tabBarUnderlineStyle (also removing justifyContent: 'space-around').

On Android, the patched tab view swaps @react-native-community/viewpager for react-native-pager-view and removes useNativeDriver from Animated.event scroll handlers.

Separately, the Solana webview E2E page object wraps reading the signed message in Utilities.executeWithRetry to reduce flakiness.

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

- move from patch-package to yarn patch - add 1 line style fix

github-actions · 2026-05-13T16:53:27Z

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.

Prithpal-Sooriya · 2026-05-13T16:53:47Z

Moved from patch-package to yarn patch.
If this is too messy, happy to use patch-package.

It's not possible to use patch-package anymore since yarn v3 upgrade

cursor

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

^{❌ 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 9f85b2b. Configure here.}

…"flex-start"

Prithpal-Sooriya · 2026-05-13T17:10:21Z

+   tabs: {
+     height: 50,
+     flexDirection: 'row',
+-    justifyContent: 'space-around',


main style fix - remove the bottom border to use "space-around", so now will default to "flex-start".

This ensures that the banner is aligned with the selected item.

github-actions · 2026-05-14T12:51:44Z

🔍 Smart E2E Test Selection

Selected E2E tags: SmokeNetworkAbstractions, SmokeNetworkExpansion, SmokeMultiChainAPI, SmokeConfirmations, SmokeAccounts, SmokePerps, SmokeWalletPlatform
Selected Performance tags: None (no tests recommended)
Risk Level: medium
AI Confidence: 82%

click to see 🤖 AI reasoning details

E2E Test Selection:
Two categories of changes:

SolanaTestDApp.ts (test page object): The getSignedMessage method is wrapped with Utilities.executeWithRetry for improved reliability. This is a test infrastructure improvement that directly affects Solana dApp E2E tests → SmokeNetworkExpansion (Solana flows).
@tommasini/react-native-scrollable-tab-view patch migration: The package is migrated from the old patches/ directory to the new yarn patch system. The patch itself contains meaningful changes:
- DefaultTabBar.js: Adds tabPadding prop, fixes underline animation positioning, removes justifyContent: 'space-around' from tab styles, fixes tabBarUnderlineStyle → underlineStyle prop name
- index.js: Replaces deprecated @react-native-community/viewpager with react-native-pager-view, removes useNativeDriver: true from scroll event handlers

This component is used across many critical UI flows:

NetworkManager → SmokeNetworkAbstractions (network selection tabs)
PermissionsSummary / MultichainPermissionsSummary → SmokeNetworkExpansion, SmokeMultiChainAPI (permission tabs for dApp connections)
AccountConnect / AccountPermissions → SmokeAccounts, SmokeNetworkExpansion (account connection tabs)
Perps components (PerpsTutorialCarousel, PerpsHeroCardView) → SmokePerps
RevealPrivateCredential SRPTabView → SmokeAccounts (SRP reveal tabs)
AddAsset TokenView → SmokeWalletPlatform (token import tabs)

Dependent tags per descriptions:

SmokeNetworkAbstractions → also select SmokeNetworkExpansion, SmokeMultiChainAPI
SmokeNetworkExpansion (Solana flows) → also select SmokeConfirmations
SmokePerps → also select SmokeWalletPlatform, SmokeConfirmations
SmokeMultiChainAPI → also select SmokeNetworkAbstractions, SmokeNetworkExpansion

The tab view rendering changes (layout, animation, pager) could affect visual correctness and interaction in all these flows.

Performance Test Selection:
The scrollable tab view patch changes layout and animation behavior (removes useNativeDriver, changes tab positioning), but these are minor UI fixes rather than performance-critical changes. The components affected (NetworkManager, PermissionsSummary, Perps carousel) are not in the hot path for the available performance test scenarios (account list, onboarding, login, swaps, launch, asset loading, predict, perps). No performance tests are warranted.

View GitHub Actions results

sonarqubecloud · 2026-05-14T13:08:24Z

Quality Gate passed

Issues
0 New issues
0 Accepted issues

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

See analysis details on SonarQube Cloud

fix react-native-scrollable-tab-view underline style positioning.

9f85b2b

- move from patch-package to yarn patch - add 1 line style fix

Prithpal-Sooriya requested a review from a team as a code owner May 13, 2026 16:53

github-actions Bot added the pr-not-ready-for-e2e Skip E2E and block merging. Remove this label once the PR is ready to run the E2E tests. label May 13, 2026

metamaskbotv2 Bot added the team-assets label May 13, 2026

Prithpal-Sooriya commented May 13, 2026

View reviewed changes

Comment thread .yarn/patches/@tommasini-react-native-scrollable-tab-view-npm-1.1.1-153a9df479.patch Outdated

github-actions Bot added the size-S label May 13, 2026

cursor Bot reviewed May 13, 2026

View reviewed changes

Comment thread .yarn/patches/@tommasini-react-native-scrollable-tab-view-npm-1.1.1-153a9df479.patch Outdated

refactor: cleaner patch - remove justifyContext to use default value …

d3febbc

…"flex-start"

Prithpal-Sooriya commented May 13, 2026

View reviewed changes

tommasini previously approved these changes May 13, 2026

View reviewed changes

Prithpal-Sooriya changed the title ~~style: react-native-scrollable-tab-view underline style positioning.~~ fix: react-native-scrollable-tab-view underline style positioning. May 13, 2026

Prithpal-Sooriya enabled auto-merge May 13, 2026 18:34

Merge branch 'main' into refactor/patch-react-native-tab-scrollview

d9b9929

Prithpal-Sooriya changed the title ~~fix: react-native-scrollable-tab-view underline style positioning.~~ fix: react-native-scrollable-tab-view underline style positioning May 13, 2026

Prithpal-Sooriya removed the pr-not-ready-for-e2e Skip E2E and block merging. Remove this label once the PR is ready to run the E2E tests. label May 13, 2026

Prithpal-Sooriya added 5 commits May 13, 2026 22:51

Merge branch 'main' into refactor/patch-react-native-tab-scrollview

b33e13c

Merge branch 'main' into refactor/patch-react-native-tab-scrollview

86e76eb

Merge branch 'main' into refactor/patch-react-native-tab-scrollview

b3b4b2b

Merge branch 'main' into refactor/patch-react-native-tab-scrollview

925df87

test: fix flakey solana test dapp interactions

92c6db8

Prithpal-Sooriya dismissed tommasini’s stale review via 92c6db8 May 14, 2026 12:49

Prithpal-Sooriya requested a review from a team as a code owner May 14, 2026 12:49

christopherferreira9 approved these changes May 14, 2026

View reviewed changes

Prithpal-Sooriya commented May 14, 2026

View reviewed changes

Comment thread tests/page-objects/Browser/SolanaTestDApp.ts

tommasini approved these changes May 14, 2026

View reviewed changes

Prithpal-Sooriya added this pull request to the merge queue May 14, 2026

Merged via the queue into main with commit 7ab53fd May 14, 2026
124 of 144 checks passed

Prithpal-Sooriya deleted the refactor/patch-react-native-tab-scrollview branch May 14, 2026 14:49

github-actions Bot locked and limited conversation to collaborators May 14, 2026

metamaskbotv2 Bot added the release-7.78.0 Issue or pull request that will be included in release 7.78.0 label May 14, 2026

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

fix: react-native-scrollable-tab-view underline style positioning#30133

fix: react-native-scrollable-tab-view underline style positioning#30133
Prithpal-Sooriya merged 8 commits into
mainfrom
refactor/patch-react-native-tab-scrollview

Prithpal-Sooriya commented May 13, 2026 •

edited by cursor Bot

Loading

Uh oh!

github-actions Bot commented May 13, 2026

Uh oh!

Prithpal-Sooriya May 13, 2026

Uh oh!

tommasini May 13, 2026

Uh oh!

Uh oh!

cursor Bot left a comment

Uh oh!

Uh oh!

Prithpal-Sooriya May 13, 2026

Uh oh!

github-actions Bot commented May 14, 2026

Uh oh!

sonarqubecloud Bot commented May 14, 2026

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Uh oh!

Conversation

Prithpal-Sooriya commented May 13, 2026 • edited by cursor Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Changelog

Related issues

Manual testing steps

Screenshots/Recordings

Before

After

Pre-merge author checklist

Performance checks (if applicable)

Pre-merge reviewer checklist

Uh oh!

github-actions Bot commented May 13, 2026

Uh oh!

Prithpal-Sooriya May 13, 2026

Choose a reason for hiding this comment

Uh oh!

tommasini May 13, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

cursor Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Prithpal-Sooriya May 13, 2026

Choose a reason for hiding this comment

Uh oh!

github-actions Bot commented May 14, 2026

🔍 Smart E2E Test Selection

Uh oh!

sonarqubecloud Bot commented May 14, 2026

Quality Gate passed

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Prithpal-Sooriya commented May 13, 2026 •

edited by cursor Bot

Loading