chore: upgrade React Native from 0.72.15 to 0.76.9 with babel configuration updates

[georgewrmarshall]

Description

Upgrades React Native from 0.72.15 to 0.76.9 and updates associated build configurations to ensure compatibility with the latest React Native version. This includes modernizing Babel configurations, updating Jest test setup, reorganizing font assets, and upgrading related dependencies for improved performance and future-proofing.

Key changes include replacing deprecated metro-react-native-babel-preset with the new @react-native/babel-preset, updating Jest transform patterns to properly handle React Native 0.76.9 modules, and organizing Storybook font assets into a proper assets/fonts directory structure.

Related issues

Fixes:

Manual testing steps

1. Install dependencies: yarn install
2. Build the React Native design system package: yarn workspace @metamask/design-system-react-native build
3. Run tests to verify compatibility: yarn workspace @metamask/design-system-react-native test
4. Start Storybook React Native app: yarn storybook:ios or yarn storybook:android
5. Verify that components render correctly and fonts load properly
6. Test component interactions and animations with React Native Reanimated 3.17.2
7. Verify Jest tests pass with the updated configuration

Screenshots/Recordings

Before

After

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.

[socket-security]

Review the following changes in direct dependencies. Learn more about Socket for GitHub.

Diff	Package	Supply Chain Security	Vulnerability	Quality	Maintenance	License
	@​react-native/​typescript-config@​0.76.9
	@​babel/​preset-react@​7.26.3 ⏵ 7.27.1
	@​babel/​preset-typescript@​7.26.0 ⏵ 7.27.1	+1		+1
	@​babel/​plugin-transform-modules-commonjs@​7.26.3 ⏵ 7.27.1
	expo@​49.0.23 ⏵ 52.0.47	+1		+3
	expo-system-ui@​2.4.0 ⏵ 3.0.7
	@​babel/​core@​7.28.0 ⏵ 7.28.4
	@​react-native/​babel-preset@​0.76.9
	expo-status-bar@​1.6.0 ⏵ 2.0.1			-1
	expo-font@​11.4.0 ⏵ 14.0.9			+1
	react-native-reanimated@​3.3.0 ⏵ 3.19.3			+3
	@​testing-library/​react-native@​12.9.0 ⏵ 13.3.3				+1
	react-native-gesture-handler@​2.12.1 ⏵ 2.16.2	+1		+1	+1
	react-native@​0.72.17 ⏵ 0.76.9			+1
	expo-splash-screen@​31.0.10

View full report

[socket-security]

All alerts resolved. Learn more about Socket for GitHub.

This PR previously contained dependency changes with security issues that have been resolved, removed, or ignored.

Ignoring alerts on:

• global-dirs@0.1.1
• stream-buffers@2.2.0
• resolve-global@1.0.0
• webidl-conversions@5.0.0
• whatwg-url-without-unicode@8.0.0-3
• @isaacs/ttlcache@1.4.1
• lighthouse-logger@1.4.2
• bplist-creator@0.0.7
• chrome-launcher@0.15.2
• selfsigned@2.4.1
• picomatch@3.0.1
• web-streams-polyfill@3.3.3
• chromium-edge-launcher@0.2.0
• react-refresh@0.14.2
• hermes-parser@0.23.1
• hermes-estree@0.23.1
• babel-plugin-syntax-hermes-parser@0.23.1
• lightningcss-win32-arm64-msvc@1.27.0
• lightningcss-freebsd-x64@1.27.0
• send@0.19.1
• resolve-workspace-root@2.0.0
• hermes-estree@0.25.1
• hermes-parser@0.25.1
• babel-plugin-syntax-hermes-parser@0.25.1
• @expo/fingerprint@0.11.11
• @expo/ws-tunnel@1.0.6
• @expo/sudo-prompt@9.3.2
• @react-native/metro-babel-transformer@0.76.9
• @react-native/babel-preset@0.76.9
• @react-native/babel-plugin-codegen@0.76.9
• @react-native/debugger-frontend@0.76.9
• @react-native/dev-middleware@0.76.9
• @react-native/community-cli-plugin@0.76.9
• @react-native/typescript-config@0.76.9
• react-native-is-edge-to-edge@1.1.7
• marky@1.3.0
• getenv@2.0.0
• @jest/diff-sequences@30.0.1
• babel-plugin-polyfill-corejs3@0.13.0
• @babel/helper-globals@7.28.0
• @jest/schemas@30.0.5
• @jridgewell/remapping@2.3.5
• @types/node-forge@1.3.14
• @jest/get-type@30.1.0
• @sinclair/typebox@0.34.41
• @babel/traverse--for-generate-function-map@7.28.4
• expo-splash-screen@31.0.10
• jest-diff@30.2.0
• jest-matcher-utils@30.2.0
• undici@6.22.0
• resolve@1.22.11
• baseline-browser-mapping@2.8.19
• open@7.4.2
• mime@1.6.0
• flow-enums-runtime@0.0.6
• react-native-gesture-handler@2.16.2
• commander@12.1.0
• expo-system-ui@3.0.7
• lightningcss@1.27.0
• lightningcss-darwin-x64@1.27.0
• lightningcss-linux-x64-gnu@1.27.0
• lightningcss-win32-x64-msvc@1.27.0
• lightningcss-darwin-arm64@1.27.0
• lightningcss-linux-arm64-gnu@1.27.0
• lightningcss-linux-arm-gnueabihf@1.27.0
• lightningcss-linux-arm64-musl@1.27.0
• lightningcss-linux-x64-musl@1.27.0
• @expo/vector-icons@14.0.4
• react-devtools-core@5.3.2
• babel-plugin-react-native-web@0.19.13
• dotenv-expand@11.0.7
• dotenv@16.4.7
• expo-status-bar@2.0.1
• @expo/env@0.4.2
• expo-modules-autolinking@2.0.8
• expo-keep-awake@14.0.3
• @expo/metro-config@0.19.12
• expo-constants@17.0.8
• expo-modules-core@2.2.3
• expo-asset@11.0.5
• expo-file-system@18.0.12
• @react-native/js-polyfills@0.76.9
• @react-native/codegen@0.76.9
• react-native@0.76.9
• babel-preset-expo@12.0.11
• @react-native/assets-registry@0.76.9
• @react-native/gradle-plugin@0.76.9
• @react-native/virtualized-lists@0.76.9
• @expo/devcert@1.2.0
• @expo/cli@0.22.26
• @babel/plugin-transform-block-scoped-functions@7.27.1
• @babel/plugin-transform-computed-properties@7.27.1
• @babel/plugin-transform-export-namespace-from@7.27.1
• @babel/plugin-transform-function-name@7.27.1
• @babel/plugin-transform-literals@7.27.1
• @babel/plugin-transform-logical-assignment-operators@7.27.1
• @babel/plugin-transform-member-expression-literals@7.27.1
• @babel/plugin-transform-named-capturing-groups-regex@7.27.1
• @babel/plugin-transform-numeric-separator@7.27.1
• @babel/plugin-transform-optional-catch-binding@7.27.1
• @babel/plugin-transform-property-literals@7.27.1
• @babel/plugin-transform-sticky-regex@7.27.1
• @babel/helper-remap-async-to-generator@7.27.1
• @babel/plugin-proposal-export-default-from@7.27.1
• @babel/plugin-syntax-export-default-from@7.27.1
• @babel/plugin-syntax-typescript@7.27.1
• @babel/plugin-transform-async-to-generator@7.27.1
• @babel/plugin-transform-for-of@7.27.1
• @babel/plugin-transform-modules-commonjs@7.27.1
• @babel/plugin-transform-spread@7.27.1
• @babel/plugin-syntax-jsx@7.27.1
• @babel/plugin-transform-react-jsx@7.27.1
• @babel/plugin-transform-object-super@7.27.1
• @babel/plugin-transform-private-methods@7.27.1
• @babel/plugin-transform-private-property-in-object@7.27.1
• @babel/plugin-transform-react-jsx-development@7.27.1
• @babel/plugin-transform-react-pure-annotations@7.27.1
• @babel/preset-react@7.27.1
• @babel/preset-typescript@7.27.1
• @babel/plugin-syntax-flow@7.27.1
• @babel/plugin-transform-flow-strip-types@7.27.1
• metro-runtime@0.81.5
• metro-source-map@0.81.5
• metro@0.81.5
• metro-config@0.81.5
• metro-core@0.81.5
• metro-babel-transformer@0.81.5
• metro-cache@0.81.5
• metro-cache-key@0.81.5
• metro-file-map@0.81.5
• metro-resolver@0.81.5
• metro-symbolicate@0.81.5
• metro-transform-plugins@0.81.5
• metro-transform-worker@0.81.5
• ob1@0.81.5
• metro-minify-terser@0.81.5
• expo@52.0.47
• @babel/plugin-transform-parameters@7.27.7
• @babel/helper-define-polyfill-provider@0.6.5
• babel-plugin-polyfill-corejs2@0.4.14
• babel-plugin-polyfill-regenerator@0.6.5
• @urql/exchange-retry@1.3.2
• @urql/core@5.2.0
• @babel/plugin-transform-typescript@7.28.0
• @babel/plugin-transform-async-generator-functions@7.28.0
• @babel/plugin-transform-destructuring@7.28.0
• @babel/plugin-transform-react-display-name@7.28.0
• on-headers@1.1.0
• compression@1.8.1
• @0no-co/graphql.web@1.2.0
• @babel/generator@7.28.3
• @babel/helper-module-transforms@7.28.3
• @babel/helper-wrap-function@7.28.3
• @babel/plugin-transform-runtime@7.28.3
• @testing-library/react-native@13.3.3
• @babel/plugin-transform-block-scoping@7.28.4
• @babel/plugin-transform-regenerator@7.28.4
• @babel/compat-data@7.28.4
• @babel/core@7.28.4
• @babel/types@7.28.4
• @babel/plugin-transform-classes@7.28.4
• @babel/parser@7.28.4
• @babel/helpers@7.28.4
• @babel/runtime@7.28.4
• @babel/plugin-transform-object-rest-spread@7.28.4
• @expo/image-utils@0.8.7
• @expo/image-utils@0.6.5
• @expo/json-file@9.1.5
• @expo/json-file@9.0.2
• @expo/json-file@10.0.7
• @expo/osascript@2.3.7
• @expo/plist@0.4.7
• @expo/plist@0.2.2
• @expo/config-types@54.0.8
• @expo/config-types@52.0.5
• debug@4.4.3
• @expo/package-manager@1.9.8
• pretty-format@30.2.0
• @expo/config-plugins@54.0.2
• @expo/config-plugins@9.0.17
• browserslist@4.26.3
• @expo/config@12.0.10
• @expo/config@10.0.11
• core-js-compat@3.46.0
• expo-font@14.0.9
• expo-font@13.0.4
• react-native-reanimated@3.19.3
• electron-to-chromium@1.5.237
• caniuse-lite@1.0.30001751
• node-releases@2.0.26
• @react-native/normalize-colors@0.76.9
• @react-native/normalize-colors@0.81.5
• @react-native/normalize-colors@0.74.85
• @expo/prebuild-config@54.0.6
• @expo/prebuild-config@8.2.0

View full report

[github-actions]

📖 Storybook Preview

• View PR Storybook

[github-actions]

📖 Storybook Preview

• View PR Storybook

[github-actions]

📖 Storybook Preview

• View PR Storybook

[georgewrmarshall]

@SocketSecurity ignore-all
These dependencies are all related to React Native and Expo, and are expected as part of the upgrade.