A React Native plugin for deploying cross-platform applications built with React Native, Rspack and Re.Pack. This plugin enables Over-The-Air updates capabilities for federated applications and seamless deployment to Zephyr Cloud.
The fastest way to get started is to use create-zephyr-apps
to generate a new React Native application with Zephyr integration and choose from React Native example:
npx create-zephyr-apps@latest
For more information, please refer to our documentation for Repack and also a comprehensive guide to work with Re.Pack here.
Installing the zephyr-repack-plugin
for your cross-platform application:
# npm
npm install --save-dev zephyr-repack-plugin
# yarn
yarn add --dev zephyr-repack-plugin
# pnpm
pnpm add --dev zephyr-repack-plugin
# bun
bun add --dev zephyr-repack-plugin
Using zephyr-repack-plugin
by wrapping the Rspack configuration:
const { withZephyr } = require('zephyr-repack-plugin');
const config = {
/** ...rspack configuration */
};
module.exports = withZephyr()(config);
With zephyr-repack-plugin
you can continue to use the previous configuration from Module Federation configuration (note that just the configuration, not the plugin). We recommend using the new Re.Pack Module Federation as it has better runtime support for cross-platform applications for usage with rspack and react native.
For usage with Re.Pack you can check out Re.Pack's docs - another reference of how to use it is Callstack's Super App Showcase and our Repack Example.
- You can continue to use previous configuration from Module Federation configuration (note that just the configuration, not the plugin). We recommend using the new Re.Pack Module Federation as it has better runtime support for cross-platform applications for usage with rspack and react native.
// rspack.config.js
plugins: [
new Repack.plugins.ModuleFederationPluginV2({
// your configuration
}),
];
// rspack.config.js
...
new Repack.plugins.ModuleFederationPluginV2({
/**
* The name of the module is used to identify the module in URLs resolver and imports.
*/
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 modules are shared in the share scope.
* React, React Native and React Navigation should be provided here because there should be only one instance of these modules.
* Their names are used to match requested modules in this compilation.
*/
shared: getSharedDependencies({eager: true}),
}),
...
// rspack.config.js
...
new Repack.plugins.ModuleFederationPluginV2({
/**
* The name of the module is used to identify the module in URLs resolver and imports.
*/
name: 'MobileCheckout',
filename: 'MobileCheckout.container.js.bundle',
dts: false,
/**
* This is a list of modules that will be shared between remote containers.
*/
exposes: {
'./CheckoutSection': './src/components/CheckoutSection',
'./CheckoutSuccessScreen': './src/screens/CheckoutSuccessScreen',
},
/**
* Shared modules are shared in the share scope.
* React, React Native and React Navigation should be provided here because there should be only one instance of these modules.
* Their names are used to match requested modules in this compilation.
*/
shared: getSharedDependencies({eager: STANDALONE}),
}),
...
To create a complete example of a React Native application, with Zephyr enabled, configured, you can use our creation command where you can find most of our examples.
npx create-zephyr-apps@latest
This will create a new React Native application with Zephyr enabled, configured, and ready to use. Read more about what this command would create here.
- 📱 Cross-platform React Native support (iOS, Android)
- 🚀 Over-The-Air (OTA) updates for federated applications
- 🏗️ Module Federation support with Re.Pack
- ⚡ Rspack for fast bundling and building
- 🔧 Zero-config setup with minimal configuration
- 📊 Build analytics and monitoring
- 🌐 Global CDN distribution for mobile assets
- React Native 0.70 or higher
- Re.Pack 3.x or higher
- Rspack 0.3 or higher
- Node.js 18 or higher
- Zephyr Cloud account (sign up at zephyr-cloud.io)
We welcome contributions! Please read our contributing guidelines for more information.
Licensed under the Apache-2.0 License. See LICENSE for more information.