@react-native/metro-config

Custom Transformer

This feature allows you to specify a custom transformer for Metro. In this example, the configuration is set to use the 'react-native-typescript-transformer' to handle TypeScript files.

const { getDefaultConfig } = require('@react-native/metro-config');

const config = getDefaultConfig(__dirname);

config.transformer = {
  babelTransformerPath: require.resolve('react-native-typescript-transformer')
};

module.exports = config;

Custom Resolver

This feature allows you to customize the resolver settings. In this example, the configuration is modified to include additional file extensions like 'ts' and 'tsx' for TypeScript support.

const { getDefaultConfig } = require('@react-native/metro-config');

const config = getDefaultConfig(__dirname);

config.resolver = {
  sourceExts: ['jsx', 'js', 'ts', 'tsx']
};

module.exports = config;

Asset Plugins

This feature allows you to specify asset plugins for Metro. In this example, the configuration is set to use 'expo-asset/tools/hashAssetFiles' to handle asset files.

const { getDefaultConfig } = require('@react-native/metro-config');

const config = getDefaultConfig(__dirname);

config.transformer = {
  assetPlugins: ['expo-asset/tools/hashAssetFiles']
};

module.exports = config;