chore: bump RN to 0.83.0-rc.4 #8706
Conversation
There was a problem hiding this comment.
Pull request overview
This PR upgrades React Native from version 0.82.0 to 0.83.0-rc.4. Due to changes in Yarn's dependency management (react-native is no longer in the root node_modules), the repository structure has been updated to properly resolve dependencies from their new locations.
Key Changes:
- Upgraded React Native and related packages to 0.83.0-rc.4
- Updated React from 19.1.1 to 19.2.0
- Modified dependency resolution logic to support new Yarn workspace structure
- Added new experimental CSS background properties to style configuration
- Updated native build configurations and dependency paths across all example apps
Reviewed changes
Copilot reviewed 17 out of 20 changed files in this pull request and generated 8 comments.
Show a summary per file
| File | Description |
|---|---|
scripts/metro-blocklist.js |
New utility to generate blocklists for multiple monorepo locations |
packages/react-native-worklets/plugin/package.json |
Updated @react-native/eslint-config to 0.83.0-rc.4 |
packages/react-native-worklets/package.json |
Updated React Native dependencies and React types |
packages/react-native-reanimated/src/common/style/config.ts |
Added experimental background CSS properties with eslint disable |
packages/react-native-reanimated/package.json |
Updated React Native, React, and related dependencies; added flash-list and svg |
apps/web-example/package.json |
Updated React, React Native, and added react-strict-dom dependency |
apps/tvos-example/metro.config.js |
Refactored to use shared blocklist utility and improved type annotations |
apps/next-example/package.json |
Updated React and React Native versions |
apps/macos-example/react-native.config.js |
Added localResolve function to handle new dependency locations |
apps/macos-example/metro.config.js |
Refactored to use shared blocklist utility |
apps/macos-example/macos/Podfile.lock |
Updated pod paths from root node_modules to common-app node_modules |
apps/fabric-example/react-native.config.js |
Added localResolve function and updated getDependencies call |
apps/fabric-example/package.json |
Updated dependencies and added hoistingLimits config |
apps/fabric-example/metro.config.js |
Added blocklist configuration and extraNodeModules resolution |
apps/fabric-example/ios/Podfile.lock |
Updated all React Native pods to 0.83.0-rc.4 and fixed dependency paths |
apps/fabric-example/ios/FabricExample.xcodeproj/project.pbxproj |
Updated REACT_NATIVE_PATH and added OTHER_CFLAGS |
apps/fabric-example/android/app/build.gradle |
Updated paths to React Native directories |
apps/common-app/scripts/dependencies.js |
Enhanced dependency resolution with localResolve support |
apps/common-app/package.json |
Updated React Native and related dependencies |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| try { | ||
| root = path.dirname(require.resolve(`${moduleName}/package.json`)); | ||
| } catch { | ||
| // If a package defines an `exports` field, `require.resolve` can fail. | ||
| // Fortunately, none of the packages we care about cause this issue. | ||
| } | ||
| } |
There was a problem hiding this comment.
Should this try ... catch block be repeated with the same comment? Maybe it'd better to add a helper function called e.g. tryResolve that will encapsulate this logic?
apps/fabric-example/metro.config.js
Outdated
| const { getModuleBlocklist } = require('../../scripts/metro-blocklist'); | ||
| const path = require('path'); | ||
|
|
||
| const root = path.resolve(__dirname, '../..'); | ||
| const appsPath = path.resolve(root, 'apps'); | ||
| const modulesToBlock = ['react', 'react-native']; | ||
| const blockList = getModuleBlocklist(modulesToBlock); | ||
|
|
||
| const monorepoRoot = path.resolve(__dirname, '../..'); | ||
| const appsPath = path.resolve(monorepoRoot, 'apps'); | ||
|
|
||
| const defaultConfig = getDefaultConfig(__dirname); | ||
| /** | ||
| * Metro configuration https://reactnative.dev/docs/metro | ||
| * | ||
| * @type {import('@react-native/metro-config').MetroConfig} | ||
| */ | ||
| let config = { | ||
| watchFolders: [root, appsPath], | ||
| projectRoot: __dirname, | ||
| watchFolders: [monorepoRoot, appsPath], | ||
| resolver: { | ||
| blockList: [...blockList.concat(defaultConfig.resolver.blockList)], | ||
|
|
||
| extraNodeModules: modulesToBlock.reduce((acc, name) => { | ||
| acc[name] = path.join(__dirname, 'node_modules', name); | ||
| return acc; | ||
| }, /** @type {{ [key: string]: string }} */ ({})), | ||
| }, | ||
| }; |
There was a problem hiding this comment.
Don't you prefer to add a helper function that will take only a list of string package names that should be resolved from the local directory instead of adding these quite complex changes in all metro configs?
| return require.resolve(`${moduleName}/package.json`); | ||
| } | ||
|
|
||
| const dependencies = getDependencies(__dirname, [], localResolve); |
There was a problem hiding this comment.
Do we have to pass this callback function that just adds the /package.json string to the module name? Can't this logic be implemented within the getDependencies helper?
apps/tvos-example/metro.config.js
Outdated
| acc[name] = path.join(__dirname, 'node_modules', name); | ||
| return acc; | ||
| }, {}), | ||
| }, /** @type {{ [key: string]: string }} */ ({})), |
There was a problem hiding this comment.
Did it fail without this explicit typing before?
| experimental_backgroundImage: false, // TODO: | ||
| // @ts-ignore This type doesn't exist on non-strict-api | ||
| experimental_backgroundPosition: false, // TODO: | ||
| experimental_backgroundSize: false, // TODO: | ||
| experimental_backgroundRepeat: false, // TODO: |
There was a problem hiding this comment.
Why TODO with colon but without anything after the colon? Should there be some comment?
| "@types/jest": "30.0.0", | ||
| "@types/node": "24.0.14", | ||
| "@types/react": "19.2.2", | ||
| "@types/react": "19.2.0", |
scripts/metro-blocklist.js
Outdated
| acc.push(getBlockRegex(monorepoRoot, moduleName)); | ||
| acc.push(getBlockRegex(commonAppPath, moduleName)); | ||
| acc.push(getBlockRegex(reanimatedPath, moduleName)); | ||
| acc.push(getBlockRegex(workletsPath, moduleName)); |
There was a problem hiding this comment.
Maybe some loop over array of blocked paths instead of adding them separately? I know that there are only 4 of them so it might be fine for now.
MatiPl01
left a comment
MatiPl01
left a comment
There was a problem hiding this comment.
LGTM. Shared some thoughts on Slack, but there are no blockers, so this PR is good to go. Thanks for fixing all the issues with RN 0.83.
Summary
Yarn had changed where some dependencies are located - i.e.
react-nativeis no longer in the root - so I had to modify the repo setup slightly.Test plan