Skip to main content

Custom Metro configuration

WaveMaker React Native apps are bundled with Metro using a default configuration. You can add your own Metro settings on top of it, for example to support extra asset types or to tune the build.

When to use it​

Use a custom Metro configuration whenever your app needs a Metro setting that WaveMaker's default configuration doesn't include. You can change any option in the Metro configuration, such as the resolver, transformer, serializer or cache settings, and you can apply a Metro plugin that a library provides.

Adding a custom Metro configuration​

  1. In Studio, create a file named custommetro.config.js in the src/main/webapp folder of your project.
  2. Export an async function from this file. The function receives WaveMaker's Metro config object, already set up with WaveMaker's defaults. Change only what you need and return it.
  3. Build the app. WaveMaker copies the file into the generated app and applies your function after its own settings.

If the file isn't present, the app builds with WaveMaker's default Metro configuration.

caution

WaveMaker applies your custom Metro configuration as it is and doesn't validate it. Your changes can affect how the app builds and runs, for example build speed, bundle size or how modules are resolved. Add only the settings your app needs, and test the app thoroughly after every change to the configuration.

Example​

The following configuration adds lottie as an asset extension and adds a module alias:

const path = require('path');

module.exports = async (config) => {
  config.resolver.assetExts.push('lottie');
  config.resolver.extraNodeModules['my-lib'] = path.resolve(__dirname, 'node_modules/my-lib');

  return config;
};
note

Always return the config object from the function.

Example: Sentry​

Libraries that provide a Metro plugin take a configuration and return a wrapped one. Pass WaveMaker's config to the plugin and return the result:

const { withSentryConfig } = require('@sentry/react-native/metro');

module.exports = async (config) => {
  return withSentryConfig(config);
};

The library must be available in the project. To add an npm package, see Third-party expo plugins.