Zephyr Cloud Docs

    Re.Pack (React Native)

    Deploy your React Native applications with Module Federation to Zephyr Cloud using Re.Pack and Rspack. The Zephyr Re.Pack plugin integrates seamlessly with Re.Pack's build process and supports cross-platform mobile applications.

    Prerequisites
    Quick Setup with Codemod
    npm
    yarn
    pnpm
    bun
    npx with-zephyr

    This detects your bundler and configures Zephyr automatically. Learn more →

    For manual setup, continue below.

    Installation

    Install the Re.Pack plugin in your project:

    npm
    yarn
    pnpm
    bun
    deno
    npm add --dev zephyr-repack-plugin

    Basic Setup

    Add the Zephyr plugin to your Rspack configuration by wrapping it with withZephyr:

    // rspack.config.js
const { withZephyr } = require('zephyr-repack-plugin');

const config = {
  // ...your existing rspack configuration
  plugins: [
    // your existing plugins
  ],
};

module.exports = withZephyr()(config);

    Module Federation with Re.Pack

    You can continue using your existing Module Federation configuration from Re.Pack. We recommend using the new Re.Pack Module Federation as it provides better runtime support for cross-platform applications.

    For detailed Re.Pack setup, refer to Re.Pack's documentation and check out Callstack's Super App Showcase for reference implementations.

    Host Application (Consumer)

    // rspack.config.js
const { withZephyr } = require('zephyr-repack-plugin');
const Repack = require('@callstack/repack');

const config = {
  plugins: [
    new Repack.plugins.ModuleFederationPluginV2({
      name: 'MobileHost',
      dts: false,
      remotes: {
        MobileCart: `MobileCart@http://localhost:9000/${platform}/MobileCart.container.js.bundle`,
        MobileInventory: `MobileInventory@http://localhost:9001/${platform}/MobileInventory.container.js.bundle`,
        MobileCheckout: `MobileCheckout@http://localhost:9002/${platform}/MobileCheckout.container.js.bundle`,
        MobileOrders: `MobileOrders@http://localhost:9003/${platform}/MobileOrders.container.js.bundle`,
      },
      shared: getSharedDependencies({ eager: true }),
    }),
  ],
};

module.exports = withZephyr()(config);

    Remote Application (Provider)

    // rspack.config.js
const { withZephyr } = require('zephyr-repack-plugin');
const Repack = require('@callstack/repack');

const config = {
  plugins: [
    new Repack.plugins.ModuleFederationPluginV2({
      name: 'MobileCheckout',
      filename: 'MobileCheckout.container.js.bundle',
      dts: false,
      exposes: {
        './CheckoutSection': './src/components/CheckoutSection',
        './CheckoutSuccessScreen': './src/screens/CheckoutSuccessScreen',
      },
      shared: getSharedDependencies({ eager: STANDALONE }),
    }),
  ],
};

module.exports = withZephyr()(config);

    Shared Dependencies

    Configure shared dependencies to ensure single instances of critical modules like React and React Native:

    // rspack.config.js
const getSharedDependencies = ({ eager }) => ({
  react: { singleton: true, eager },
  'react-native': { singleton: true, eager },
  '@react-navigation/native': { singleton: true, eager },
  '@react-navigation/stack': { singleton: true, eager },
});

    Platform-Specific Builds

    Re.Pack supports platform-specific builds for iOS and Android. The ${platform} variable in remote URLs automatically resolves to the target platform:

    remotes: {
  MobileCart: `MobileCart@http://localhost:9000/${platform}/MobileCart.container.js.bundle`,
}