[DSRN] Added BadgeCount

[brianacnguyen]

Description

This PR adds the BadgeCount component to the @metamask/design-system-react-native package

Related issues

Fixes: #400

Manual testing steps

1. Run yarn storybook:ios from root
2. Go to Components > BadgeCount

Screenshots/Recordings

Before

After

Simulator.Screen.Recording.-.iPhone.15.Pro.Max.-.2025-03-10.at.21.04.23.mp4

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.

[georgewrmarshall]

Looking great! Left one non-blocking suggestion otherwise LGTM 🚀

• Checked component against Figma designs ✅
• Checked stories and controls ✅

[georgewrmarshall]

Looking good! Can we use the default Tailwind CSS classes for sizing where possible? This aligns directly with our spacing system, reinforcing consistency instead of relying on custom values. I believe this is generally better practice.

[brianacnguyen]

Looking good! Can we use the default Tailwind CSS classes for sizing where possible? This aligns directly with our spacing system, reinforcing consistency instead of relying on custom values. I believe this is generally better practice.

Can you point out which area is still not using this spacing system?

[georgewrmarshall]

Left a suggestion to simplify the tests while maintaining coverage. We can likely apply this to most of these PRs but we can adjust the testing in a subsequent PR

[georgewrmarshall]

I see your intent with ensuring we have good testing coverage here but I think these tests seem overly complex and test implementation details that make them brittle. For tests we should be focusing on:

1. Core functionality:
   • count display
   • overflow behavior (max prop)
2. Prop behavior:
   • textProps customization
   • style prop
   • size prop
   • prop forwarding

[georgewrmarshall]

MIght need to look at the spacing system for correct tailwind classnams I don't think it supports h-3.5