feat: [DSRN] Added TextArea

[brianacnguyen]

Description

This PR adds TextArea to @metamask/design-system-react-native: a multiline field built from the existing Input inside a styled Box (border, focus/error/disabled states, min height, transparent inner input). It aligns with the shared field model by introducing TextAreaPropsShared in @metamask/design-system-shared (ADR-0004), mirroring TextField without start/end accessories.

Input was updated so multiline mode works correctly: typography uses the text variant + font classes instead of single-line input metrics, the inner TextInput receives multiline, and the iOS-only lineHeight: 0 placeholder workaround is skipped when multiline so paragraph layout is not broken.

Also included: README, Storybook stories, and unit tests for TextArea; Input tests were extended for multiline behavior.

Related issues

Fixes: https://consensyssoftware.atlassian.net/browse/DSYS-573

Manual testing steps

1. From the repo root, run React Native Storybook (e.g. yarn storybook:ios or yarn storybook:android).
2. Open the TextArea stories and verify default, disabled, error, and focus border behavior; type multiple lines and confirm layout and placeholder alignment.
3. Spot-check a story or screen that still uses Input in single-line mode to confirm no regression.

Screenshots/Recordings

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

Before

After

Simulator.Screen.Recording.-.iPhone.15.Pro.Max.-.2026-04-30.at.13.24.23.mov

Pre-merge author checklist

• I've followed MetaMask Contributor Docs
• 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.

---

Note

Medium Risk
Updates shared Input styling/placeholder behavior and introduces a new multiline TextArea, so regressions could affect existing input rendering across platforms (especially iOS/Android placeholder/layout differences). Scope is UI-focused with good test coverage, but touches a widely-used primitive.

Overview
Adds a new TextArea component to @metamask/design-system-react-native: a multiline, bordered field wrapper around Input with focus/error/disabled chrome, inputProps passthrough, and separate refs for the root container vs. inner TextInput.

Updates Input to properly support multiline usage by forwarding multiline, using variant typography styles (instead of single-line metrics) for multiline, and scoping the iOS lineHeight: 0 placeholder workaround to single-line only.

Extends/updates unit tests and Storybook to cover the new TextArea and the updated Input multiline + iOS placeholder behaviors, and aligns shared prop contracts by introducing TextAreaPropsShared and refactoring TextFieldPropsShared to build on InputPropsShared (which now includes placeholder and autoFocus).

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

[github-actions]

📖 Storybook Preview

• View PR Storybook

[github-actions]

📖 Storybook Preview

• View PR Storybook

[github-actions]

📖 Storybook Preview

• View PR Storybook

[georgewrmarshall]

Overall this PR looks good, and the RN implementation/tests are in solid shape. I think the remaining issue is mostly sequencing and shared-API shape: PR #1043 should land first so this component can build on InputPropsShared, and then TextAreaPropsShared can be based on the shared input contract rather than inheriting from TextFieldPropsShared.

[github-actions]

📖 Storybook Preview

• View PR Storybook

[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 1d9dd05. Configure here.}

[github-actions]

📖 Storybook Preview

• View PR Storybook

[georgewrmarshall]

The RN implementation is close, and the earlier dependency/focus-state issues look resolved, but I think there are still a few API/process issues to address before merge. This PR extends the React Native-specific onChangeText callback name further into @metamask/design-system-shared, appears to expose textVariant on TextField through shared-type inheritance even though the source extension component does not expose typography control, and manually updates packages/design-system-shared/CHANGELOG.md even though changelog updates are part of the release process. I think those should be cleaned up before this lands.

[github-actions]

📖 Storybook Preview

• View PR Storybook

[github-actions]

📖 Storybook Preview

• View PR Storybook

[georgewrmarshall]

The current revision looks ready to merge. The earlier shared-type/API concerns appear resolved: TextAreaPropsShared now builds on InputPropsShared, TextField no longer exposes textVariant through shared inheritance, and the changelog edit is gone. The RN implementation and targeted multiline/input tests also look solid from this pass.

[github-actions]

📖 Storybook Preview

• View PR Storybook