Zephyr Cloud Docs
Zephyr Cloud →
Zephyr Cloud →

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
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`,
}