Fix Metro local static image paths (#33829)

Loading local static assets from a different package within a monorepo
appears broken in Metro for Android. The below fixes paths to packages
within this project to include the necessary `/assets/..` that Metro's
server expects to traverse to the correct directory.

- https://git.io/JBV4e
- https://git.io/JBFon

packages/react-native-editor/metro.config.js

@@ -2,6 +2,13 @@
  * External dependencies
  */
 const path = require( 'path' );
+const fs = require( 'fs' );
+
+const PACKAGES_DIR = path.resolve( __dirname, '..' );
+const packageNames = fs.readdirSync( PACKAGES_DIR ).filter( ( file ) => {
+	const stats = fs.statSync( path.join( PACKAGES_DIR, file ) );
+	return stats.isDirectory();
+} );
 
 module.exports = {
 	watchFolders: [ path.resolve( __dirname, '../..' ) ],
@@ -18,4 +25,26 @@ module.exports = {
 			},
 		} ),
 	},
+	server: {
+		enhanceMiddleware: ( middleware ) => ( req, res, next ) => {
+			/**
+			 * Loading local static assets from a different package within a monorepo
+			 * appears broken in Metro for Android. The below fixes paths to packages
+			 * within this project to include the necessary `/assets/..` that Metro's
+			 * server expects to traverse to the correct directory.
+			 *
+			 * - https://git.io/JBV4e
+			 * - https://git.io/JBFon
+			 */
+			const firstUrlSegment = req.url.split( '/' )[ 1 ];
+			if ( packageNames.includes( firstUrlSegment ) ) {
+				req.url = req.url.replace(
+					`/${ firstUrlSegment }`,
+					`/assets/../${ firstUrlSegment }`
+				);
+			}
+
+			return middleware( req, res, next );
+		},
+	},
 };

patches/react-native+0.64.0.patch

@@ -23,27 +23,3 @@ index 52cbda4..3e3b71e 100644
    hidesWhenStopped: true,
    size: 'small',
  };
-diff --git a/node_modules/react-native/Libraries/Image/AssetSourceResolver.js b/node_modules/react-native/Libraries/Image/AssetSourceResolver.js
-index 5ebd97a..3f511b9 100644
---- a/node_modules/react-native/Libraries/Image/AssetSourceResolver.js
-+++ b/node_modules/react-native/Libraries/Image/AssetSourceResolver.js
-@@ -92,9 +92,18 @@ class AssetSourceResolver {
-    */
-   assetServerURL(): ResolvedAssetSource {
-     invariant(!!this.serverUrl, 'need server to load from');
-+		/**
-+		 * The monorepo configuration we have set up is suffering from local static
-+		 * images not displaying. It would appear the server URL is incorrect. This
-+		 * is not a proper fix, but a stopgap.
-+		 * - https://git.io/JBV4e
-+		 * - https://git.io/JBV4k
-+		 */
-+		const brokenMonorepoAsset = /(^assets\/\.\.\/)(?!\.\.\/|node_modules)(.*)/g;
-     return this.fromSource(
-       this.serverUrl +
--        getScaledAssetPath(this.asset) +
-+        getScaledAssetPath(this.asset)
-+					.replace(brokenMonorepoAsset, '$1packages/$2') +
-         '?platform=' +
-         Platform.OS +
-         '&hash=' +