chore: upgrade react native, expo and storybook

[georgewrmarshall]

Description

This PR upgrades React Native, Expo, and Storybook dependencies for the storybook-react-native app to align with MetaMask Mobile's dependency versions and upgrade to Storybook v10.

Key Changes:

1. Dependency Upgrades:

   • Upgraded all Storybook packages from v9.1.x to v10.1.0
   • Updated react-native-safe-area-context from 4.12.0 to 5.6.0
   • Updated react-native-gesture-handler from 2.20.2 to 2.28.0
   • Updated @gorhom/bottom-sheet from 5.1.1 to 5.2.6
   • Downgraded react-native-svg from 15.10.1 to 15.8.0 (Expo SDK 52 compatibility)
   • See package.json for full dependency list

2. Storybook UI Workaround:

   • Implemented @storybook/react-native-ui-lite to fix bottom sheet menu issue
   • The full Storybook UI's bottom sheet menu was not responding to touch events due to a known Reanimated v3 compatibility issue (see storybookjs/react-native#802)
   • LiteUI provides a lightweight alternative without bottom sheet dependencies, resolving the navigation issue

3. Metro Configuration:

   • Updated withStorybook import to use named export (Storybook v10 API change)
   • Configured SVG transformer to work with Storybook's metro wrapper

4. Babel Configuration:

   • Added react-native-reanimated/plugin as the last plugin (required for Reanimated v3)

Known Issues:

• SVG Rendering Errors: When using Expo Go, SVG icons throw native module initialization errors:

  Invariant Violation: View config getter callback for component 'RNSVGPath' must be a function (received 'undefined')
  

  This is a known limitation when using custom SVG transformers with Expo Go. The error occurs because the react-native-svg native module doesn't properly initialize with the custom transformer configuration.

  Workaround Options:

  1. Use a development build instead of Expo Go (npx expo prebuild)
  2. Stories without SVG icons work correctly
  3. The Storybook navigation menu works despite this error

Related issues

Fixes: N/A

Related:

• storybookjs/react-native#802 - Bottom sheet menu unresponsive with Reanimated components

Manual testing steps

1. Run yarn install in the repository root
2. Navigate to apps/storybook-react-native
3. Run yarn storybook:ios or yarn storybook:android
4. Open the app in Expo Go
5. Verify the hamburger menu opens when tapped (using LiteUI)
6. Navigate between different stories using the menu
7. Note: Stories with SVG icons will show errors in Expo Go (expected)

Screenshots/Recordings

Before

• Bottom sheet menu visible but unresponsive to touch
• Unable to navigate between stories

After

• ✅ Menu opens and closes properly with LiteUI
• ✅ Story navigation works
• ⚠️ SVG rendering errors in Expo Go (known limitation with custom transformers)

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

Low Risk
No functional changes are present in the supplied diff, so merge risk is minimal (though the PR may be missing its intended commits).

Overview
The provided diff is empty (no files changed), so there are no code or dependency updates to review in this PR based on the information available.

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

[socket-security]

No dependency changes detected. Learn more about Socket for GitHub.

👍 No dependency changes detected in pull request

[github-actions]

📖 Storybook Preview

• View PR Storybook

[github-actions]

📖 Storybook Preview

• View PR Storybook

[github-actions]

📖 Storybook Preview

• View PR Storybook

[github-actions]

📖 Storybook Preview

• View PR Storybook

[github-actions]

📖 Storybook Preview

• View PR Storybook

[github-actions]

📖 Storybook Preview

• View PR Storybook

[github-actions]

📖 Storybook Preview

• View PR Storybook