Workaround react-native-community/cli#826

README.md

This fixes some work that is not yet synchronised between cli/metro and RN.

As you can see this only works for all platforms if you manually replace the assets URL in metro.config.js. So if you have more assets that are affected by this bug, add them in metro.config.js.

Adjust to your folder structure, mine is:

• apps
  • app-1
    • metro.config.js
    • ...
• node_modules
  • react-native
  • ...
• patches
  • patch1.patch
  • ...

When all of these are available in sync, these patches may not be required anymore (and should be changed anyway):

• react-native-community/cli#939
• facebook/react-native#27932
• facebook/metro#533

Issue react-native-community/cli#826

Use patch-package for the patches

metro.config.js

/**
 * Metro configuration for React Native
 * https://github.com/facebook/react-native
 *
 * @format
 */

const path = require('path');

const watchFolders = [
  path.resolve(__dirname, '..', '..', 'node_modules'),
  path.resolve(__dirname, '..', '..', 'packages'),
];

const server = {
  enhanceMiddleware: middleware => {
    return (req, res, next) => {
      // see https://github.com/react-navigation/react-navigation/issues/7774
      // and https://github.com/facebook/metro/issues/290
      const assets = '/node_modules/react-navigation-stack/lib/module/views/assets';

      if (req.url.startsWith(assets)) {
        req.url = req.url.replace(assets, '/assets/../../node_modules/react-navigation-stack/lib/module/views/assets');
      }

      return middleware(req, res, next);
    };
  },
};

module.exports = {
  watchFolders,
  server,
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: false,
      },
    }),
  },
};

patches_@react-native-community+cli+3.2.1.patch

diff --git a/node_modules/@react-native-community/cli/build/commands/bundle/getAssetDestPathIOS.js b/node_modules/@react-native-community/cli/build/commands/bundle/getAssetDestPathIOS.js
index 80f10e1..1fd61a7 100644
--- a/node_modules/@react-native-community/cli/build/commands/bundle/getAssetDestPathIOS.js
+++ b/node_modules/@react-native-community/cli/build/commands/bundle/getAssetDestPathIOS.js
@@ -27,7 +27,14 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 function getAssetDestPathIOS(asset, scale) {
   const suffix = scale === 1 ? '' : `@${scale}x`;
   const fileName = `${asset.name + suffix}.${asset.type}`;
-  return _path().default.join(asset.httpServerLocation.substr(1), fileName);
+  return _path().default.join(
+    // Assets can have relative paths outside of the project root.
+    // Replace `../` with `_` to make sure they don't end up outside of
+    // the expected assets directory.
+    // see https://github.com/react-native-community/cli/pull/939
+    asset.httpServerLocation.substr(1).replace(/\.\.\//g, '_'),
+    fileName,
+  );
 }
 
 var _default = getAssetDestPathIOS;

patches_react-native+0.61.5.patch

diff --git a/node_modules/react-native/Libraries/Image/AssetSourceResolver.js b/node_modules/react-native/Libraries/Image/AssetSourceResolver.js
index 90156bf..b7db98a 100644
--- a/node_modules/react-native/Libraries/Image/AssetSourceResolver.js
+++ b/node_modules/react-native/Libraries/Image/AssetSourceResolver.js
@@ -113,7 +113,13 @@ class AssetSourceResolver {
    */
   scaledAssetURLNearBundle(): ResolvedAssetSource {
     const path = this.jsbundleUrl || 'file://';
-    return this.fromSource(path + getScaledAssetPath(this.asset));
+    return this.fromSource(
+      // Assets can have relative paths outside of the project root.
+      // When bundling them we replace `../` with `_` to make sure they
+      // don't end up outside of the expected assets directory.
+      // see https://github.com/facebook/react-native/pull/27932
+      path + getScaledAssetPath(this.asset).replace(/\.\.\//g, '_'),
+    );
   }

   /**

only facebook/metro#533 is not merged yet