[Do not merge till RNW 0.82 is released] Picker - Upgrade Windows to New Arch using XAML Islands

windows/NuGet.Config → NuGet.config

@@ -1,12 +1,9 @@
 <?xml version="1.0" encoding="utf-8"?>
 <configuration>
-  <config>
-    <add key="repositoryPath" value="packages" />
-  </config>
   <packageSources>
     <clear />
-    <add key="Nuget.org" value="https://api.nuget.org/v3/index.json" />
     <add key="react-native" value="https://pkgs.dev.azure.com/ms/react-native/_packaging/react-native-public/nuget/v3/index.json" />
+    <add key="Nuget.org" value="https://api.nuget.org/v3/index.json" />
   </packageSources>
   <disabledPackageSources>
     <clear />

example/NuGet.config

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<configuration>
+  <!-- This placeholder file is reserved for future use, but also to prevent
+      using the config from the cpp-app template, allowing the lib to rely on
+      config file added to its root. -->
+</configuration>

example/index.js

@@ -1,9 +1,10 @@
-/**
- * @format
- */
-
-import {AppRegistry} from 'react-native';
-import App from './src/App';
-import {name as appName} from './app.json';
-
-AppRegistry.registerComponent(appName, () => App);
+/**
+ * @format
+ */
+
+import {AppRegistry} from 'react-native';
+import App from './src/App';
+import {name as appName} from './app.json';
+
+console.log('AppRegistry running the app:', appName);
+AppRegistry.registerComponent(appName, () => App);

example/jest.config.windows.js

@@ -0,0 +1,3 @@
+const config = {};
+
+module.exports = require('@rnx-kit/jest-preset')('windows', config);

example/metro.config.js

@@ -1,11 +1,40 @@
-const {makeMetroConfig} = require('@rnx-kit/metro-config');
-module.exports = makeMetroConfig({
-  transformer: {
-    getTransformOptions: async () => ({
-      transform: {
-        experimentalImportSupport: false,
-        inlineRequires: false,
-      },
-    }),
-  },
-});
+const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config');
+const path = require('path');
+
+const root = path.resolve(__dirname, '..');
+
+const defaultConfig = getDefaultConfig(__dirname);
+
+/**
+ * Metro configuration
+ * https://reactnative.dev/docs/metro
+ *
+ * @type {import('metro-config').MetroConfig}
+ */
+const config = {
+  watchFolders: [root],
+  resolver: {
+    // Make sure Metro can resolve the picker package from the parent folder
+    extraNodeModules: {
+      '@react-native-picker/picker': root,
+    },
+    // Block duplicate react-native packages
+    blockList: [
+      new RegExp(`${root.replace(/[/\\]/g, '[/\\\\]')}/node_modules/react-native/.*`),
+    ],
+    nodeModulesPaths: [
+      path.resolve(__dirname, 'node_modules'),
+      path.resolve(root, 'node_modules'),
+    ],
+  },
+  transformer: {
+    getTransformOptions: async () => ({
+      transform: {
+        experimentalImportSupport: false,
+        inlineRequires: true,
+      },
+    }),
+  },
+};
+
+module.exports = mergeConfig(defaultConfig, config);

example/package.json

@@ -14,38 +14,47 @@
     "mkdist": "node -e \"require('node:fs').mkdirSync('dist', { recursive: true, mode: 0o755 })\"",
     "start": "react-native start",
     "test": "jest",
-    "windows": "react-native run-windows"
+    "windows": "npx @react-native-community/cli run-windows",
+    "test:windows": "jest --config jest.config.windows.js"
   },
   "dependencies": {
     "@react-native-picker/picker": "workspace:^",
-    "react": "18.3.1",
-    "react-native": "0.76.3",
+    "react": "19.1.0",
+    "react-native": "0.82.0",
     "react-native-macos": "^0.75.0",
-    "react-native-windows": "^0.76.0"
+    "react-native-windows": "0.0.0-canary.1020"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",
     "@babel/preset-env": "^7.25.3",
     "@babel/runtime": "^7.25.0",
-    "@react-native-community/cli": "15.0.1",
-    "@react-native-community/cli-platform-android": "15.0.1",
-    "@react-native-community/cli-platform-ios": "15.0.1",
-    "@react-native/babel-preset": "0.76.3",
-    "@react-native/eslint-config": "0.76.3",
-    "@react-native/metro-config": "0.76.3",
-    "@react-native/typescript-config": "0.76.3",
+    "@react-native-community/cli": "20.0.0",
+    "@react-native-community/cli-platform-android": "20.0.0",
+    "@react-native-community/cli-platform-ios": "20.0.0",
+    "@react-native/babel-preset": "0.82.0",
+    "@react-native/eslint-config": "0.82.0",
+    "@react-native/metro-config": "0.82.0",
+    "@react-native/typescript-config": "0.82.0",
+    "@rnx-kit/jest-preset": "^0.1.17",
     "@rnx-kit/metro-config": "^2.0.0",
-    "@types/react": "^18.2.6",
-    "@types/react-test-renderer": "^18.0.0",
+    "@types/react": "^19.1.0",
+    "@types/react-test-renderer": "^19.0.0",
     "babel-jest": "^29.6.3",
     "eslint": "^8.19.0",
     "jest": "^29.6.3",
     "prettier": "2.8.8",
     "react-native-test-app": "^4.0.4",
-    "react-test-renderer": "18.3.1",
+    "react-test-renderer": "19.1.0",
     "typescript": "5.0.4"
   },
   "engines": {
-    "node": ">=18"
+    "node": ">=22"
+  },
+  "react-native-windows": {
+    "init-windows": {
+      "name": "PickerExample",
+      "namespace": "PickerExample",
+      "template": "cpp-app"
+    }
   }
 }

example/react-native.config.js

@@ -1,23 +1,47 @@
-const project = (() => {
-  try {
-    const {configureProjects} = require('react-native-test-app');
-    return configureProjects({
-      android: {
-        sourceDir: 'android',
-      },
-      ios: {
-        sourceDir: 'ios',
-      },
-      windows: {
-        sourceDir: 'windows',
-        solutionFile: 'windows/Example.sln',
-      },
-    });
-  } catch (_) {
-    return undefined;
-  }
-})();
-
-module.exports = {
-  ...(project ? {project} : undefined),
-};
+const path = require('path');
+
+const project = (() => {
+  try {
+    const {configureProjects} = require('react-native-test-app');
+    return configureProjects({
+      android: {
+        sourceDir: 'android',
+      },
+      ios: {
+        sourceDir: 'ios',
+      },
+      windows: {
+        sourceDir: 'windows',
+        solutionFile: 'PickerExample.sln',
+      },
+    });
+  } catch (_) {
+    return undefined;
+  }
+})();
+
+module.exports = {
+  ...(project ? {project} : undefined),
+  dependencies: {
+    '@react-native-picker/picker': {
+      root: path.resolve(__dirname, '..'),
+      platforms: {
+        windows: {
+          sourceDir: 'windows',
+          solutionFile: 'Picker.sln',
+          projects: [
+            {
+              projectFile: 'Picker\\Picker.vcxproj',
+              projectName: 'Picker',
+              projectLang: 'cpp',
+              projectGuid: '{170F439F-1AC2-40F6-94D2-FB6511EDF052}',
+              directDependency: true,
+              cppHeaders: ['winrt/Picker.h'],
+              cppPackageProviders: ['Picker::ReactPackageProvider'],
+            },
+          ],
+        },
+      },
+    },
+  },
+};