How To Use Mods

Hi Team,

I’m trying to use mods in my app to modify some native files, but I’m not being able to. I have my mod file as follow:

expo-mods/ios/withCustomProductName.js

const expoPlugins = require('@expo/config-plugins');

const withCustomProductName = (config) => {
  return expoPlugins.withXcodeProject(config, async config => {
    // config = { modResults, modRequest, ...expoConfig }

    const xcodeProject = config.modResults;
    xcodeProject.productName = "TEST_MODS";

    return config;
  });
};

module.exports = withCustomProductName;

And then in my config file:

app.config.js

const withCustomProductName = require("./expo-mods/ios/withCustomProductName")

module.exports = {
  ...
  mods: {
    ios: {
      withCustomProductName
    },
  },
  ...
}

But every time I run expo prebuild I get this warning:

✔ Created native projects | /android, /ios already created | gitignore already synced
⚠️  Skipped Metro config updates:
› Existing Metro config found; not overwriting.
› You will need to extend the default @expo/metro-config in your Metro config.
  Learn more: https://docs.expo.io/guides/customizing-metro

✔ Updated package.json and added index.js entry point for iOS and Android.
🧶 Using Yarn to install packages. Pass --npm to use npm instead.
✔ Installed JavaScript dependencies.
⚠️  Config synced with warnings that should be fixed:
- ios.withCustomProductName: Skipping: Initial base modifier for "ios.withCustomProductName" is not a provider and therefore will not provide modResults to child mods. This may be due to an outdated version of Expo CLI.

Expo CLI 4.7.3 environment info:
    System:
      OS: macOS 11.4
      Shell: 5.8 - /bin/zsh
    Binaries:
      Node: 12.22.1 - ~/.nvm/versions/node/v12.22.1/bin/node
      Yarn: 1.22.10 - ~/.nvm/versions/node/v12.22.1/bin/yarn
      npm: 7.16.0 - ~/.nvm/versions/node/v12.22.1/bin/npm
    Managers:
      CocoaPods: 1.10.1 - /usr/local/bin/pod
    SDKs:
      iOS SDK:
        Platforms: iOS 14.5, DriverKit 20.4, macOS 11.3, tvOS 14.5, watchOS 7.4
    IDEs:
      Android Studio: 4.2 AI-202.7660.26.42.7351085
      Xcode: 12.5.1/12E507 - /usr/bin/xcodebuild
    npmPackages:
      expo: ^41.0.0 => 41.0.1 
      react: 16.13.1 => 16.13.1 
      react-dom: 16.13.1 => 16.13.1 
      react-native: ~0.63.4 => 0.63.4 
      react-native-web: ~0.13.12 => 0.13.18 
    npmGlobalPackages:
      expo-cli: 4.7.3
    Expo Workflow: bare

please refer to importing plugins. mods run inside of a config plugin, so you should refer to withCustomProductName inside of plugins in your app.config.js