docs: add tw.style() array pattern guidance to styling rule

[georgewrmarshall]

Description

Extracts and documents the React Native tw.style() array pattern from the BannerAlert migration (PR #966) into the styling cursor rule. This pattern is essential for components that need to apply Tailwind classes while accepting a custom style prop.

What is the reason for the change?

• The BannerAlert component migration introduced an important pattern for merging tw.style() with style props using arrays
• This pattern ensures type safety and proper merge order (tw classes → twClassName → style prop)
• The pattern needs to be documented in the styling rule so it's available as a reference for all future components

What is the improvement/solution?

• Adds comprehensive documentation of the array pattern to .cursor/rules/styling.md
• Includes correct ✅ and incorrect ❌ examples
• Explains why the array pattern is preferred (type safety, merge order, consistency with Box)
• Provides real-world example from BannerAlert component
• Ensures AI agents and developers follow this pattern consistently

This documentation was originally added as part of PR #966 but is being extracted into a standalone documentation update for better visibility and reusability.

Related issues

Related to:

• feat: add BannerAlert React Native and shared types #966 (BannerAlert migration)

Manual testing steps

1. Review the updated .cursor/rules/styling.md file
2. Verify the array pattern documentation is clear and comprehensive
3. Confirm examples match the BannerAlert implementation

Screenshots/Recordings

N/A - Documentation only change

Before

No documentation for merging tw.style() with style props

After

Comprehensive documentation including:

• ❌ Wrong pattern (passing style directly to tw.style)
• ✅ Correct pattern (array with tw.style and style)
• Why array pattern explanation
• Real-world BannerAlert example

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 (N/A - documentation only)
• I've documented my code using JSDoc format if applicable (N/A)
• 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

Low Risk
Documentation-only change; no runtime or build behavior is modified.

Overview
Updates .cursor/rules/styling.md to document the React Native array pattern for combining tw.style() output with an incoming style prop.

Adds ✅/❌ examples, explains the rationale (type safety + explicit merge order), and includes a BannerAlert snippet showing style={[tw.style(...), style]} while passing twClassName through {...props}.

^{Written by Cursor Bugbot for commit f1933ec. This will update automatically on new commits. Configure here.}

[github-actions]

📖 Storybook Preview

• View PR Storybook

[georgewrmarshall]

Left a comment

[georgewrmarshall]

We should be passing twClassName down to the twClassName prop not in style