Metro transformer

Metro bundler is a JavaScript bundler used in React Native apps. This package provides a transformer for Metro to compile .po message catalogs on the fly. It's an alternative to the lingui compile command. The transformer enables you to import .po files directly, instead of running lingui compile and importing its output.

Installation

note

Only Expo SDK 49 and React Native v0.72.1 or newer are supported.

The library is currently in beta. If you encounter any issues, please report them.

Install @lingui/metro-transformer as a development dependency:

npm

npm install --save-dev @lingui/metro-transformer

Yarn

yarn add --dev @lingui/metro-transformer

pnpm

pnpm add --save-dev @lingui/metro-transformer

Set up the transformer in your metro.config.js by specifying babelTransformerPath:

Expo

metro.config.js

// Learn more https://docs.expo.io/guides/customizing-metro
const { getDefaultConfig } = require("expo/metro-config");

const config = getDefaultConfig(__dirname);
const { transformer, resolver } = config;

config.transformer = {
  ...transformer,
  babelTransformerPath: require.resolve("@lingui/metro-transformer/expo"),
};
config.resolver = {
  ...resolver,
  assetExts: resolver.assetExts.filter((ext) => ext !== "po"),
  sourceExts: [...resolver.sourceExts, "po"],
};

module.exports = config;

plain React Native

metro.config.js

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

const defaultConfig = getDefaultConfig(__dirname);
const { assetExts, sourceExts } = defaultConfig.resolver;

/**
 * Metro configuration
 * https://reactnative.dev/docs/metro
 *
 * @type {import('metro-config').MetroConfig}
 */
const config = {
  transformer: {
    babelTransformerPath: require.resolve(
      "@lingui/metro-transformer/react-native"
    )
  },
  resolver: {
    assetExts: assetExts.filter((ext) => ext !== "po"),
    sourceExts: [...sourceExts, "po"]
  }
};

module.exports = mergeConfig(defaultConfig, config);

Usage

tip

Take a look at the example app that uses the transformer. Only .po files are supported by the transformer.

1. Import .po files directly in your code:

   -import { messages } from "./src/locales/en/messages.ts";
   +import { messages } from "./src/locales/en/messages.po";

2. If you are using TypeScript, you need to add .po file declaration so that TypeScript understands the file extension:

   src/po-types.d.ts

   declare module "*.po" {
     import type { Messages } from "@lingui/core";
     export const messages: Messages;
   }

3. Restart Metro bundler with expo start -c or yarn start --reset-cache to clear the transformer cache.

4. Profit! 🎉