metro.config.js

const path = require('path');
const escape = require('escape-string-regexp');
const { getDefaultConfig } = require('@expo/metro-config');
const pak = require('../package.json');
const { wrapWithReanimatedMetroConfig } = require('react-native-reanimated/metro-config');

const root = path.resolve(__dirname, '..');

const modules = Object.keys({
  ...pak.peerDependencies,
});

/** @type {import('expo/metro-config').MetroConfig} */
const defaultConfig = getDefaultConfig(__dirname);

const { transformer: defaultTransformer, resolver: defaultResolver } = defaultConfig;

const config = {
  ...defaultConfig,

  projectRoot: __dirname,
  watchFolders: [root],

  transformer: {
    ...defaultTransformer,
    babelTransformerPath: require.resolve('react-native-svg-transformer'),
  },

  // We need to make sure that only one version is loaded for peerDependencies
  // So we block them at the root, and alias them to the versions in example's node_modules
  resolver: {
    ...defaultResolver,
    assetExts: defaultResolver.assetExts.filter((ext) => ext !== 'svg'),
    sourceExts: [...defaultResolver.sourceExts, 'svg'],
    blockList: [
      defaultResolver.blockList,
      ...modules.map((m) => new RegExp(`^${escape(path.join(root, 'node_modules', m))}\\/.*$`)),
    ],

    extraNodeModules: modules.reduce((acc, name) => {
      acc[name] = path.join(__dirname, 'node_modules', name);
      return acc;
    }, {}),
  },
};

module.exports = wrapWithReanimatedMetroConfig(config);