Update to react-native 0.72 (#3216)

* Update to react-native 0.72

* Change files

* fix metro config

* fix

apps/E2E/package.json

@@ -23,14 +23,15 @@
   ],
   "dependencies": {
     "react": "18.2.0",
-    "react-native": "^0.71.0"
+    "react-native": "^0.72.0"
   },
   "devDependencies": {
     "@babel/core": "^7.8.0",
     "@babel/runtime": "^7.8.0",
     "@fluentui-react-native/eslint-config-rules": "^0.1.1",
     "@fluentui-react-native/focus-zone": "^0.15.0",
     "@fluentui-react-native/scripts": "^0.1.1",
+    "@react-native/metro-config": "^0.72.0",
     "@rnx-kit/metro-config": "^1.3.1",
     "@types/jasmine": "3.10.3",
     "@types/react": "^18.2.0",
@@ -44,8 +45,8 @@
     "appium-uiautomator2-driver": "^2.29.0",
     "appium-windows-driver": "^2.12.0",
     "appium-xcuitest-driver": "^5.6.0",
-    "metro-config": "^0.73.7",
-    "metro-react-native-babel-preset": "^0.73.7",
+    "metro-config": "^0.76.5",
+    "metro-react-native-babel-preset": "^0.76.5",
     "rimraf": "^5.0.1",
     "ts-node": "^8.10.1",
     "typescript": "4.9.4",
@@ -61,7 +62,7 @@
         "microsoft/react-native"
       ],
       "requirements": [
-        "react-native@0.71"
+        "react-native@0.72"
       ],
       "capabilities": [
         "core",

apps/fluent-tester/metro.config.js

@@ -6,8 +6,7 @@
  */
 
 const path = require('path');
-const { defaultWatchFolders, exclusionList, resolveUniqueModule } = require('@rnx-kit/metro-config');
-const { getDefaultConfig } = require('metro-config');
+const { exclusionList, makeMetroConfig, resolveUniqueModule } = require('@rnx-kit/metro-config');
 
 const [reactIs, reactIsExcludePattern] = resolveUniqueModule('react-is');
 
@@ -37,30 +36,19 @@ const blockList = exclusionList([
   reactIsExcludePattern,
 ]);
 
-module.exports = (async () => {
-  const {
-    resolver: { sourceExts, assetExts },
-  } = await getDefaultConfig();
-  return {
-    watchFolders: defaultWatchFolders(),
-    resolver: {
-      assetExts: [...assetExts.filter((ext) => ext !== 'svg'), 'ttf', 'otf', 'png'],
-      sourceExts: [...sourceExts, 'svg'],
-      blacklistRE: blockList,
-      blockList,
-      extraNodeModules: {
-        'react-is': reactIs,
-      },
+let config = makeMetroConfig({
+  resolver: {
+    blockList,
+    extraNodeModules: {
+      'react-is': reactIs,
     },
-    transformer: {
-      // This transformer selects between the regular transformer and svg transformer depending on the file type
-      babelTransformerPath: require.resolve('react-native-svg-transformer'),
-      getTransformOptions: async () => ({
-        transform: {
-          experimentalImportSupport: false,
-          inlineRequires: false,
-        },
-      }),
-    },
-  };
-})();
+  },
+  transformer: {
+    // This transformer selects between the regular transformer and svg transformer depending on the file type
+    babelTransformerPath: require.resolve('react-native-svg-transformer'),
+  },
+});
+
+(config.resolver.assetExts = [...config.resolver.assetExts.filter((ext) => ext !== 'svg'), 'ttf', 'otf', 'png']),
+  (config.resolver.sourceExts = [...config.resolver.sourceExts, 'svg']),
+  (module.exports = config);

apps/fluent-tester/package.json

@@ -89,10 +89,10 @@
     "@react-native-picker/picker": "^2.2.1",
     "@warren-ms/react-native-icons": "^0.0.13",
     "react": "18.2.0",
-    "react-native": "^0.71.0",
-    "react-native-macos": "^0.71.0",
-    "react-native-svg": "^13.9.0",
-    "react-native-windows": "^0.71.0",
+    "react-native": "^0.72.0",
+    "react-native-macos": "^0.72.0",
+    "react-native-svg": "^13.14.0",
+    "react-native-windows": "^0.72.0",
     "tslib": "^2.3.1"
   },
   "devDependencies": {
@@ -101,20 +101,21 @@
     "@fluentui-react-native/eslint-config-rules": "^0.1.1",
     "@fluentui-react-native/focus-zone": "^0.15.0",
     "@fluentui-react-native/scripts": "^0.1.1",
+    "@react-native/metro-config": "^0.72.0",
     "@rnx-kit/cli": "^0.16.2",
     "@rnx-kit/metro-config": "^1.3.1",
     "@types/jasmine": "3.10.3",
     "@wdio/jasmine-framework": "7.26.0",
     "flow-bin": "^0.113.0",
-    "metro-config": "^0.73.7",
-    "metro-react-native-babel-preset": "^0.73.7",
+    "metro-config": "^0.76.5",
+    "metro-react-native-babel-preset": "^0.76.5",
     "react-native-svg-transformer": "^1.0.0",
-    "react-native-test-app": "^2.5.15",
+    "react-native-test-app": "^2.5.5",
     "react-test-renderer": "18.2.0",
     "webdriverio": "7.30.1"
   },
   "peerDependencies": {
-    "@office-iss/react-native-win32": "^0.71.0"
+    "@office-iss/react-native-win32": "^0.72.0"
   },
   "jest": {
     "preset": "react-native"
@@ -173,7 +174,7 @@
         "@fluentui-react-native/scripts/align-deps-preset.js"
       ],
       "requirements": [
-        "react-native@0.71"
+        "react-native@0.72"
       ],
       "capabilities": [
         "core-android",

apps/fluent-tester/src/TestComponents/Spacing/SpacingTest.tsx

@@ -10,7 +10,7 @@ import type { TestSection, PlatformStatus } from '../Test';
 import { Test } from '../Test';
 
 const BasicUsage: React.FunctionComponent = () => {
-  function spacingExample(tokenName: string, spacing?: number | string) {
+  function spacingExample(tokenName: string, spacing?: number) {
     return (
       <View>
         <Text>

apps/win32/package.json

@@ -32,20 +32,21 @@
   "dependencies": {
     "@fluentui-react-native/tester": "^0.157.10",
     "react": "18.2.0",
-    "react-native": "^0.71.0",
-    "react-native-svg": "^13.9.0",
+    "react-native": "^0.72.0",
+    "react-native-svg": "^13.14.0",
     "tslib": "^2.3.1"
   },
   "devDependencies": {
     "@fluentui-react-native/eslint-config-rules": "^0.1.1",
     "@fluentui-react-native/scripts": "^0.1.1",
-    "@office-iss/react-native-win32": "^0.71.0",
+    "@office-iss/react-native-win32": "^0.72.0",
     "@office-iss/rex-win32": "0.71.41-devmain.17024.10000",
+    "@react-native/metro-config": "^0.72.0",
     "@rnx-kit/cli": "^0.16.2",
     "@rnx-kit/metro-config": "^1.3.1",
     "@types/react": "^18.2.0",
-    "metro-config": "^0.73.7",
-    "metro-react-native-babel-preset": "^0.73.7",
+    "metro-config": "^0.76.5",
+    "metro-react-native-babel-preset": "^0.76.5",
     "react-native-svg-transformer": "^1.0.0",
     "react-test-renderer": "18.2.0",
     "rimraf": "^5.0.1",
@@ -90,7 +91,7 @@
         "microsoft/react-native"
       ],
       "requirements": [
-        "react-native@0.71"
+        "react-native@0.72"
       ],
       "capabilities": [
         "babel-preset-react-native",

change/@fluentui-react-native-adapters-21138493-b94f-498d-ab5a-e921a137f8af.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Update to react-native 0.72",
+  "packageName": "@fluentui-react-native/adapters",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-android-theme-22742151-3d84-4749-983d-e482d968af71.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Update to react-native 0.72",
+  "packageName": "@fluentui-react-native/android-theme",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-apple-theme-816351f0-7a1c-4652-ae63-b8af7853ec6b.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Update to react-native 0.72",
+  "packageName": "@fluentui-react-native/apple-theme",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-avatar-ebb6cfd8-0e89-4209-8697-01394d7cbba2.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Update to react-native 0.72",
+  "packageName": "@fluentui-react-native/avatar",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-badge-9165f9b8-0e70-4bdb-bb81-2e06d327c3c8.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Update to react-native 0.72",
+  "packageName": "@fluentui-react-native/badge",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-button-9df44870-76bd-4c1d-9931-6b399a277d78.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Update to react-native 0.72",
+  "packageName": "@fluentui-react-native/button",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-c42f2e9e-8d64-4840-9731-01ca797c8da0.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Update to react-native 0.72",
+  "packageName": "@fluentui/react-native",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-callout-ad7f3934-45da-4a37-9f61-e7bbed9499d8.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Update to react-native 0.72",
+  "packageName": "@fluentui-react-native/callout",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-checkbox-2650a227-f72a-4b8c-82f2-3e77055e1d00.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Update to react-native 0.72",
+  "packageName": "@fluentui-react-native/checkbox",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-chip-3ff978ba-36f3-4bfd-a36e-ee44a18f48bf.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Update to react-native 0.72",
+  "packageName": "@fluentui-react-native/chip",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-component-cache-20d4efed-bf60-42e9-8d67-962817c347db.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Update to react-native 0.72",
+  "packageName": "@fluentui-react-native/component-cache",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-composition-96bc1027-b569-49f0-ab4c-e21e9dcd062f.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Update to react-native 0.72",
+  "packageName": "@fluentui-react-native/composition",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-contextual-menu-ed5c7515-e091-4b82-800d-b4a90276c057.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Update to react-native 0.72",
+  "packageName": "@fluentui-react-native/contextual-menu",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-default-theme-502bca33-58c0-461c-96b6-ef343705dfa3.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Update to react-native 0.72",
+  "packageName": "@fluentui-react-native/default-theme",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-dependency-profiles-0e656e28-50c0-41db-9e95-c3b612611555.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Update to react-native 0.72",
+  "packageName": "@fluentui-react-native/dependency-profiles",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-divider-635bf699-3f0e-4566-b48f-af896a9def32.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Update to react-native 0.72",
+  "packageName": "@fluentui-react-native/divider",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-drawer-5197f6c3-d09f-4aeb-9b6e-2bff488e0245.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Update to react-native 0.72",
+  "packageName": "@fluentui-react-native/drawer",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-dropdown-ccfd22a1-2602-48ab-82a8-e1eaa0dc97f5.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Update to react-native 0.72",
+  "packageName": "@fluentui-react-native/dropdown",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-e2e-testing-0a953bce-6acf-47c1-a7a8-bfc5ee3db4bb.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Update to react-native 0.72",
+  "packageName": "@fluentui-react-native/e2e-testing",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-experimental-activity-indicator-1521179d-a13d-4e59-a749-c4480e7bad4d.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Update to react-native 0.72",
+  "packageName": "@fluentui-react-native/experimental-activity-indicator",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-experimental-appearance-additions-d805a9b9-fd83-4307-b099-0f96b8bad033.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Update to react-native 0.72",
+  "packageName": "@fluentui-react-native/experimental-appearance-additions",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-experimental-avatar-ef33b6f4-62e3-4e23-ab73-04c81fa5658e.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Update to react-native 0.72",
+  "packageName": "@fluentui-react-native/experimental-avatar",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-experimental-button-c35af83a-a2ed-4277-b776-f221c01cee95.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Update to react-native 0.72",
+  "packageName": "@fluentui-react-native/experimental-button",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-experimental-checkbox-6f32a574-5abe-4260-bd86-274322a39f63.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Update to react-native 0.72",
+  "packageName": "@fluentui-react-native/experimental-checkbox",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-experimental-expander-596c1376-6233-4465-aee3-b1ee8d474bc4.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Update to react-native 0.72",
+  "packageName": "@fluentui-react-native/experimental-expander",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-experimental-link-cee51cb7-62de-46e1-ba76-549e31d92aab.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Update to react-native 0.72",
+  "packageName": "@fluentui-react-native/experimental-link",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}