chore: upgrade React Native from 0.72.15 to 0.76.9 with babel configuration updates#844
chore: upgrade React Native from 0.72.15 to 0.76.9 with babel configuration updates#844georgewrmarshall wants to merge 9 commits intomainfrom
Conversation
|
Review the following changes in direct dependencies. Learn more about Socket for GitHub.
|
|
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:
|
📖 Storybook Preview |
georgewrmarshall
force-pushed
the
upgrade-react-native
branch
from
af6beb2 to
25f832a
Compare
📖 Storybook Preview |
📖 Storybook Preview |
|
@SocketSecurity ignore-all |
georgewrmarshall
force-pushed
the
upgrade-react-native
branch
from
6857f5e to
9ca35a5
Compare
|
|
||
| jest.mock('react-native-reanimated', () => { | ||
| const Reanimated = require('react-native-reanimated/mock'); | ||
|
|
||
| // Overriding the `call` method to avoid issues with animations | ||
| Reanimated.default.call = () => {}; | ||
|
|
||
| return Reanimated; | ||
| }); | ||
|
|
||
| // Silence warnings related to the Animated API | ||
| jest.mock('react-native/Libraries/Animated/NativeAnimatedHelper'); |
There was a problem hiding this comment.
React Native Reanimated mock removed - version 3.17.2 should handle React Native 0.76 compatibility better
📖 Storybook Preview |
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
| color = IconColor.IconDefault, | ||
| twClassName, | ||
| style, | ||
| hitSlop, |
There was a problem hiding this comment.
Destructured hitSlop prop silently dropped, never forwarded
Medium Severity
The newly added hitSlop destructuring on the Icon component extracts the prop from the rest ...props object, but it's never passed to the rendered SVG component. Since the return statement only spreads {...props}, and hitSlop has been pulled out of that spread, any consumer passing hitSlop to Icon will have it silently ignored. The prop needs to either be forwarded explicitly to SVG or left in the ...props spread by removing the destructuring.
| '^react-native/Libraries/vendor/emitter/EventEmitter$': | ||
| '<rootDir>/jest.setup.js', | ||
| '^react-native/Libraries/EventEmitter/RCTDeviceEventEmitter$': | ||
| '<rootDir>/jest.setup.js', |
There was a problem hiding this comment.
jest.setup.js misused as module mock target
Low Severity
The moduleNameMapper maps internal React Native EventEmitter and RCTDeviceEventEmitter modules to jest.setup.js, which doesn't export any EventEmitter-compatible API — it only contains a jest.mock call for react-native-svg. Any code transitively requiring these modules will receive an empty object {}, and the setup file is now pulling double duty as both a setupFilesAfterEnv entry and a mock module, which is fragile and confusing. A dedicated empty mock file would be more appropriate.
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes and found 2 potential issues.
There are 4 total unresolved issues (including 2 from previous reviews).
Bugbot Autofix prepared fixes for both issues found in the latest run.
- ✅ Fixed: Duplicate JSX transform from conflicting Babel presets
- Removed '@babel/preset-react' and set '@react-native/babel-preset' jsxRuntime: 'automatic' to prevent duplicate JSX transforms.
- ✅ Fixed: Missing reanimated
setUpTests()call after removing mock- Added require('react-native-reanimated').setUpTests() in jest.setup.js to initialize Reanimated for Jest.
Or push these changes by commenting:
@cursor push 884076eb43
Preview (884076eb43)
diff --git a/packages/design-system-react-native/babel.config.js b/packages/design-system-react-native/babel.config.js
--- a/packages/design-system-react-native/babel.config.js
+++ b/packages/design-system-react-native/babel.config.js
@@ -2,11 +2,10 @@
env: {
test: {
presets: [
- '@react-native/babel-preset',
[
- '@babel/preset-react',
+ '@react-native/babel-preset',
{
- runtime: 'automatic',
+ jsxRuntime: 'automatic',
},
],
[
diff --git a/packages/design-system-react-native/jest.setup.js b/packages/design-system-react-native/jest.setup.js
--- a/packages/design-system-react-native/jest.setup.js
+++ b/packages/design-system-react-native/jest.setup.js
@@ -1,3 +1,5 @@
+require('react-native-reanimated').setUpTests();
+
jest.mock('react-native-svg', () => {
const React = require('react');
const { View } = require('react-native');| test: { | ||
| presets: [ | ||
| 'module:metro-react-native-babel-preset', | ||
| '@babel/preset-env', |
There was a problem hiding this comment.
Duplicate JSX transform from conflicting Babel presets
Medium Severity
Both @react-native/babel-preset (which includes @babel/plugin-transform-react-jsx) and a separate @babel/preset-react with runtime: 'automatic' are listed. This causes duplicate JSX transformation, potentially leading to "Duplicate __self prop found" errors or other conflicts. @react-native/babel-preset supports a jsxRuntime: 'automatic' option directly, making the separate preset unnecessary.
| Rect: MockedSvg, | ||
| }; | ||
| }); | ||
|
|
There was a problem hiding this comment.
Missing reanimated setUpTests() call after removing mock
High Severity
The old jest.mock('react-native-reanimated', ...) was removed, but the replacement require('react-native-reanimated').setUpTests() required by reanimated 3.17.x was never added. Components like ButtonAnimated use useSharedValue and useAnimatedStyle from reanimated — without the setup call, these functions won't have Jest-compatible implementations and tests will fail.
1 participant
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-presetwith 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 properassets/fontsdirectory structure.Related issues
Fixes:
Manual testing steps
yarn installyarn workspace @metamask/design-system-react-native buildyarn workspace @metamask/design-system-react-native testyarn storybook:iosoryarn storybook:androidScreenshots/Recordings
Before
After
Pre-merge author checklist
Pre-merge reviewer checklist
Note
High Risk
Upgrades core runtime/tooling versions (React Native, Expo, Reanimated, React) and adjusts Metro/Babel/Jest configuration, which can cause widespread build/test/runtime regressions across packages and Storybook.
Overview
Upgrades the monorepo’s React/React Native stack to
react@18.3.1andreact-native@0.76.9, including the Expo Storybook app moving toexpo@52and updating related deps (Reanimated, gesture-handler, testing-library, etc.).Modernizes RN build/test tooling by switching the RN package test Babel preset to
@react-native/babel-preset, updating Jest transforms/ignores and adding module mappers for RN 0.76 internals, and revising the Storybook RN Metro config for monorepo resolution and SVG support.Refactors Storybook React Native setup by moving theming decorators from
config.jstopreview.js, updating Expo root registration, expanding story globs to include previously excludedtemp-components, and configuring font loading viaexpo-fontplugin inapp.json(plus ignoring generatedios/andandroid/app folders).Written by Cursor Bugbot for commit ad39389. This will update automatically on new commits. Configure here.