Allow out of tree platforms to work without custom metro configs

packages/cli-types/src/index.ts

@@ -63,6 +63,7 @@ interface PlatformConfig<
   DependencyConfig,
   DependencyParams
 > {
+  npmPackageName?: string;
   projectConfig: (
     projectRoot: string,
     projectParams: ProjectParams | void,

packages/cli/src/tools/loadMetroConfig.ts

@@ -5,6 +5,7 @@ import path from 'path';
 // @ts-ignore - no typed definition for the package
 import {loadConfig} from 'metro-config';
 import {Config} from '@react-native-community/cli-types';
+import {reactNativePlatformResolver} from './metroPlatformResolver';
 
 const INTERNAL_CALLSITES_REGEX = new RegExp(
   [
@@ -21,6 +22,12 @@ const INTERNAL_CALLSITES_REGEX = new RegExp(
 
 export interface MetroConfig {
   resolver: {
+    resolveRequest?: (
+      context: any,
+      realModuleName: string,
+      platform: string,
+      moduleName: string,
+    ) => any;
     resolverMainFields: string[];
     platforms: string[];
   };
@@ -50,6 +57,19 @@ export interface MetroConfig {
 export const getDefaultConfig = (ctx: Config): MetroConfig => {
   return {
     resolver: {
+      resolveRequest:
+        Object.keys(ctx.platforms).filter(
+          platform => ctx.platforms[platform].npmPackageName,
+        ).length === 0
+          ? undefined
+          : reactNativePlatformResolver(
+              Object.keys(ctx.platforms)
+                .filter(platform => ctx.platforms[platform].npmPackageName)
+                .reduce<{[platform: string]: string}>((result, platform) => {
+                  result[platform] = ctx.platforms[platform].npmPackageName!;
+                  return result;
+                }, {}),
+            ),
       resolverMainFields: ['react-native', 'browser', 'main'],
       platforms: [...Object.keys(ctx.platforms), 'native'],
     },
@@ -77,10 +97,7 @@ export const getDefaultConfig = (ctx: Config): MetroConfig => {
       babelTransformerPath: require.resolve(
         'metro-react-native-babel-transformer',
       ),
-      assetRegistryPath: path.join(
-        ctx.reactNativePath,
-        'Libraries/Image/AssetRegistry',
-      ),
+      assetRegistryPath: 'react-native/Libraries/Image/AssetRegistry',
     },
     watchFolders: [],
   };

packages/cli/src/tools/metroPlatformResolver.ts

@@ -0,0 +1,49 @@
+/**
+ * This is an implementation of a metro resolveRequest option which will remap react-native imports
+ * to different npm packages based on the platform requested.  This allows a single metro instance/config
+ * to produce bundles for multiple out of tree platforms at a time.
+ *
+ * @param platformImplementations
+ * A map of platform to npm package that implements that platform
+ *
+ * Ex:
+ * {
+ *    windows: 'react-native-windows'
+ *    macos: 'react-native-macos'
+ * }
+ */
+// @ts-ignore - no typed definition for the package
+import {resolve} from 'metro-resolver';
+
+export function reactNativePlatformResolver(platformImplementations: {
+  [platform: string]: string;
+}) {
+  return (
+    context: any,
+    _realModuleName: string,
+    platform: string,
+    moduleName: string,
+  ) => {
+    let backupResolveRequest = context.resolveRequest;
+    delete context.resolveRequest;
+
+    try {
+      let modifiedModuleName = moduleName;
+      if (platformImplementations[platform]) {
+        if (moduleName === 'react-native') {
+          modifiedModuleName = platformImplementations[platform];
+        } else if (moduleName.startsWith('react-native/')) {
+          modifiedModuleName = `${
+            platformImplementations[platform]
+          }/${modifiedModuleName.slice('react-native/'.length)}`;
+        }
+      }
+      let result = resolve(context, modifiedModuleName, platform);
+      context.resolveRequest = backupResolveRequest;
+      return result;
+    } catch (e) {
+      context.resolveRequest = backupResolveRequest;
+      throw e;
+    }
+  };
+}