Description

Reason for the change

On iOS, TextInput can show intermittent placeholder text misalignment or clipping. This comes from a React Native bug: TextInput still uses the default usesFontLeading = YES in NSLayoutManager, while Text was fixed in 2020 with usesFontLeading = NO. With Geist’s large ascender/leading, Fabric’s text measurement becomes inconsistent, so placeholder alignment is unstable.

Improvement / solution

Add lineHeight: 0 to the Input base styles in Input.styles.ts. This gives Fabric a fixed line height and avoids the faulty font-leading calculation. Unlike lineHeight: 20, it does not reintroduce the multi-line wrapping issue. No native changes or rebuilds are required.

References

• React Native #39145
• React Native #45268
• RN fix for Text only

Changelog

CHANGELOG entry: Fixed intermittent placeholder text alignment and clipping in text inputs on iOS.

Related issues

Fixes:

Manual testing steps

Feature: Text input placeholder alignment

  Scenario: user views single-line text inputs on iOS
    Given the app is running on an iOS device or simulator
    When the user opens screens with text inputs (e.g. Send, Swap, custom token amount)
    Then placeholder text is vertically aligned and does not shift or clip on focus/blur or after re-renders

Screenshots/Recordings

Before

After

Verified 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.

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.