The standard Initiative NPM GitHub

Unify your
Metro config.

A shared standard for composable React Native configuration. Ensure compatibility between different libraries and plugins.

Join the initiative

Why do we need a standard?

The React Native ecosystem has various approaches to configuration. Standardizing how we modify the config enables better tool interoperability.

The wrapping problem

Libraries often attempt to wrap the configuration object in different ways. Without a standard, this can lead to conflicts where settings are overwritten.

Error: Cannot read property 'transform' of undefined
  at withNativeWind (node_modules/...)
  at withReanimated (node_modules/...)

Order matters

Changing the order of plugins often breaks the build because one plugin might expect the output of another in a specific format.

1
withNativeWind
2
withReanimated
Build Failed

Inconsistent types

Transformers may return objects, functions, or promises. A standard interface ensures predictability.

return {...} Object
return (cfg) => ... Function
async (cfg) => ... Promise

The solution

A single, standardized primitive that handles merging, async resolution, and type safety for you.

Order independent Async safe

The new standard

I propose a unified interface for Metro configuration. It abstracts the complexity to ensure interoperability.

1

For library authors

Export your config using createMetroConfigTransformer. It ensures your plugin plays nicely with others.

2

For app developers

Use composeMetroConfigTransformers to combine plugins in a predictable way.

metro.config.js
Library author
import { createMetroConfigTransformer } from 'metro-config-transformers';

// 1. Library authors: Export a standard transformer
export const withMyPlugin = createMetroConfigTransformer({
  transformer: {
    getTransformOptions: async () => ({
      transform: { inlineRequires: true },
    }),
  },
});
App developer
// 2. App developers: Compose without fear
const { composeMetroConfigTransformers } = require('metro-config-transformers');
const { withNativeWind } = require('nativewind/metro');
const { withReanimated } = require('react-native-reanimated/metro-config');

module.exports = composeMetroConfigTransformers([
  withNativeWind,
  withReanimated,
  [withMyPlugin, { option: 'value' }]
]);

Join the initiative

I invite React Native library authors to adopt this standard. Let's improve the configuration experience for everyone.

Star on GitHub Submit a proposal