# Re.Pack

> A modern build tool for React Native that brings the Rspack and webpack ecosystem to mobile React Native apps

## Docs

- [Introduction](/docs/getting-started/introduction.md): Before diving deep into Re.Pack and introducing it into project, it's important to understand when and why to use Re.Pack and how does it compare with alternatives.
- [Quick start](/docs/getting-started/quick-start.md)
- [Microfrontends](/docs/getting-started/microfrontends.md): Microfrontends (MFEs) are an architectural approach that breaks down a web application’s frontend into smaller, independently deployable pieces that can be downloaded on demand. Think of them as the frontend equivalent of microservices: instead of one massive, tangled codebase, you get modular chunks that different teams can own, develop, and ship on their own timelines. It's important to note that we're not talking about producing a single JS bundle from multiple independent teams. It's about producing many JS bundles that can be later downloaded on demand by a mobile app. While web MFEs and microservices are often about using independent tech stacks, it's different on mobile iOS and Android ecosystems due to platform constraints and app store rules that typically prevent loading any compiled code. Re.Pack is largely designed to enable microfrontends on mobile. It's one of the key differences between other React Native bundlers, such as Metro, which don't support this architecture out of the box.
- [Module resolution](/docs/features/module-resolution.md): Module resolution is the process by which a bundler determines which file to load when you import a module. In React Native, this process has unique requirements—platform-specific files, scaled assets, and the react-native condition in package exports all need special handling. Re.Pack is designed to match Metro's resolution behavior as closely as possible, ensuring that projects migrating from Metro or using libraries designed for Metro work correctly. Getting module resolution right ensures that: Platform-specific files (.ios.js, .android.js) load correctly for each targetLibraries with React Native-specific entry points work as expectedScaled assets (@2x, @3x images) resolve properly
- [Code splitting](/docs/features/code-splitting.md): Code Splitting is a technique that splits the code into multiple files, which can be loaded on
demand and in parallel. It can be used to: Optimize the initial size of the application and to improve the startup performance by deferring
the parsing (only with JSC) and execution (JSC and Hermes) of the non-critical code.Dynamically deliver content and features to the users based on runtime factors: user's role,
subscription plan, preferences etc.For developers and companies: split and isolate pieces of the product to improve scalability
and reduce coupling. Code Splitting is one of the most important features in Re.Pack, and it's based on Webpack's
infrastructure as well as the native module
that allows to execute the additional code on the same JavaScript context (same React Native
instance). :::info For dynamic feature delivery, Code Splitting should be used as a mean to optimize the user
experience by deferring the features or deliver existing features only to a subset of users. ::: Code Splitting with Re.Pack is not designed to add new features dynamically without doing the
regular App Store or Play store release. It can be used to deliver fixes or tweaks to additional
(split) code, similarly to Code Push, but you should not add new features with it. :::caution Using Code Splitting to deliver new features without a regular App Store release is likely
going to violate Apple's App Store Terms and your application might be rejected or banned. ::: :::tip You should provide access to all the features for the App Store review process. Also, it might be beneficial to highlight that all split features are closely integrated with
application and cannot work in isolation - you don't want to introduce confusion that your
application might compete with Apple's App Store. On that note, you might want to avoid using terms like mini-app or mini-app store in favour of
modules, components, plugins or simply features. :::
- [Module Federation](/docs/features/module-federation.md): :::warning Notice:
The documentation for Re.Pack 5 is currently under development and is not ready yet. Please refer to Re.Pack 4.x Module Federation documentation for now, but please keep in mind that it's not up to date with the latest changes in Re.Pack 5.
:::
- [DevServer](/docs/features/dev-server.md): Re.Pack 5 has it's own dev server that contain all features as Metro packager does, or even more in some cases.
- [Flow support](/docs/features/flow-support.md): :::note Rspack users
Since SWC doesn't currently support Flow, we use a dedicated loader to strip Flow types in Rspack. With webpack, Flow support is implemented using the same set of Babel plugins as Metro.
::: Re.Pack 5 includes support for Flow language via dedicated loaders that remove Flow type annotations from the code.
- [React Native Devtools](/docs/features/devtools.md): React Native Devtools are currently recommended way of debugging your React Native application. Re.Pack comes with built-in support for React Native Devtools.
- [React Native Reanimated](/docs/features/reanimated.md): Re.Pack provides first-class support for React Native Reanimated through a dedicated plugin that simplifies integration and in some cases, optimizes your build performance. :::info This plugin is primarily used to disable console warnings that are not relevant when bundling a React Native app. :::
- [NativeWind](/docs/features/nativewind.md): NativeWind brings Tailwind CSS utility classes to React Native, enabling rapid, consistent styling. With Re.Pack, you can seamlessly integrate NativeWind through a dedicated plugin. @callstack/repack-plugin-nativewind is a plugin for Re.Pack that enables integrating NativeWind into your React Native projects.
- [Configuration](/docs/guides/configuration.md): Re.Pack uses the same configuration system as Rspack and webpack. This means you can leverage the extensive configuration options from either of the bundlers while working with React Native projects. Re.Pack comes with minimal, development & production-ready defaults that work out of the box, but as your project grows, you may need to customize various aspects of the bundling process.
- [Debugging](/docs/guides/debugging.md): Debugging is an important part of development. To debug apps using Re.Pack, you can use the following methods:
- [Bundle analysis](/docs/guides/bundle-analysis.md): Bundle analysis is a crucial process that helps you understand your app's performance bottlenecks and identify opportunities for optimization. By analyzing your bundle, you can gain insights into bundle size and composition, module dependencies, duplicate modules, and compilation time. We recommend using Rsdoctor for bundle analysis, though you can also check our alternative tools section for other options.
- [Expo Modules](/docs/guides/expo-modules.md): The Expo Modules is a popular solution for writing native modules and views in Swift and Kotlin for React Native apps. It provides a modern, consistent API across platforms with minimal boilerplate and full support for React Native's New Architecture, while maintaining backwards compatibility. Using Expo Modules with Re.Pack requires some setup - this guide will show you how to get started with Expo Modules in your project.
- [Inlining assets](/docs/guides/inline-assets.md): There are some situations when you might want to inline assets into the JavaScript bundle, instead of extracting them into standalone files. Common examples of such use cases are: Using assets inside of Module Federation remotes where you can't have assets extracted and shipped with the host app bundle.Out-of-tree platforms that don't support static assets in a similar way as React Native on iOS/Android does or don't support static assets at all. :::tip Use sparingly and only when necessary Inlining assets into the bundle makes the bundle size larger and increases the initial startup time of an app. It's most noticable when you inline an asset which has 3 scales (e.g. @1x, @2x and @3x). In that scenario, all of the scales will be inlined into the bundle since it's not possible to determine which scale is needed at runtime. :::
- [Remote assets](/docs/guides/remote-assets.md): Re.Pack provides you with a way to extract and serve your assets externally, such as on a CDN,
instead of bundling them directly into your application. When working with ModuleFederation
this is the recommended approach to handling the assets in federated modules, as inlining
the assets causes your bundle size to increase dramatically. :::tip Use remote assets only in production
During development, it's best to disable remote assets and load them locally. When you're ready to move to production, you can use enabled: true and then upload the assets to the CDN of your choosing.
:::
- [SVG support](/docs/guides/svg.md): By default, Re.Pack's Assets loader is configured to allow you to import SVGs in you code, but that doesn't mean you can render them immediately.
- [Deployment](/docs/guides/deploy.md)
- [Migrating from Metro](/docs/migration-guides/metro.md): If the automatic migration using @callstack/repack-init didn't work for any reason,
or if you have custom project structure, you can follow these manual migration steps: 1. Dependencies Install required dependencies in your project: This will install the latest versions of your chosen bundler and necessary dependencies for code optimization and minification. Once the dependencies are installed, you need to tell React Native Community CLI to add Re.Pack's commands. 2. Commands Add the following content to react-native.config.js (or create it if it doesn't exist): This will allow you to use Re.Pack when running react-native start and react-native bundle commands. 3. Configuration Pick one of the templates below and create configuration file in the root directory of your project. The name of the file should be identical to the one on top of the template e.g. rspack.config.mjs. :::info Go with ESM config by default We recommend to use ESM version of Rspack/webpack config with the .mjs extension. However, Re.Pack also supports ESM under .js and CJS variant under .js and .cjs extensions. Check our templates for CJS and ESM variants as well as the documentation on Configuration to see the list of all available Rspack/webpack config location and extensions. ::: 4. Configure XCode When building release version of your application XCode project will still use Metro to bundle the application, so you need to adjust build settings to make XCode use Re.Pack instead. Open your application's Xcode project/workspace and: Click on the project in Project navigator panel on the leftGo to Build Phases tabExpand Bundle React Native code and images phaseAdd following content to the phase: After the change, the content of this phase should look similar to: 5. Install CocoaPods dependencies For iOS development, you need to install CocoaPods dependencies. From the project root directory run: This will install all the necessary iOS dependencies for your project, including the Re.Pack native module. :::tip 🎉 Congratulations! You've successfully set up Re.Pack in your project. We highly recommend to check out the following: Configuration Guide to learn how to configure Re.Pack to your project needs.API Reference to learn more about Re.Pack's API. :::
- [Migrating from Re.Pack 4](/docs/migration-guides/repack-v4.md): :::info Re.Pack 5 now supports Rspack!
Re.Pack 5 introduces support for Rspack,
a high-performance webpack alternative with a highly compatible API.
This migration guide focuses solely on migrating from V4 to V5 while continuing to use webpack. If you're interested in using Rspack (which is encouraged), we recommend first completing the migration
to V5 with webpack and then following our separate webpack to Rspack migration guide.
::: :::danger Changes to internal plugins are not covered
Plugins that are part of RepackPlugin are considered internal and are not covered by this migration guide.
:::
- [Migrating to Rspack](/docs/migration-guides/rspack.md): This guide will help you migrate your React Native project from using webpack to Rspack with Re.Pack. :::warning ⚠️ Migrate to Re.Pack 5 first! If your project is using version 4 of Re.Pack, you need to migrate it to use Re.Pack 5 first. See the Migration from Re.Pack 4 guide for more details.
::: :::tip Why migrate to Rspack? Rspack is a fast Rust-based bundler that's compatible with the webpack ecosystem, offering significantly faster build times for both development and production while maintaining webpack compatibility with minimal migration effort.
For more details on why Rspack was created and its advantages, see the official rationale.
:::
- [Glossary of terms](/docs/resources/glossary.md)
- [Rspack & webpack](/docs/getting-started/bundlers.md)

## API

- [Overview](/api/index.md)
- [start](/api/cli/start.md): start or webpack-start is a command-line tool that starts the React Native development server with webpack integration.
- [bundle](/api/cli/bundle.md): bundle or webpack-bundle is a command-line tool that builds the bundle for the provided project.
- [Init](/api/cli/init.md): @callstack/repack-init is a command-line tool that initializes Re.Pack setup in React Native projects or creates a new React Native app with Re.Pack pre-configured. The tool detects whether it's being run in an existing React Native project or outside of it and decides what to do based on that.
- [DevServer](/api/dev-server.md): The Re.Pack DevServer is built on top of Fastify and provides a subset of webpack-dev-server  configuration options.
- [Script](/api/runtime/script.md): The Script class provides utility methods for generating script URLs used with ScriptManager resolvers. It handles URL construction for different script hosting scenarios: development servers, filesystem, and remote servers. :::info When to use Script Use Script static methods when configuring resolvers in ScriptManager.shared.addResolver() to generate properly formatted URLs for your scripts. The class handles webpack context integration and URL formatting automatically. :::
- [ScriptManager](/api/runtime/script-manager.md): The ScriptManager is a low-level utility for managing script resolution, downloading, and execution in React Native applications. It's particularly useful when working with code splitting, dynamic imports, and Module Federation. :::info Why is it called ScriptManager? It can be used to download, manage and execute external (either local or remote) JavaScript code. :::
- [AssetsLoader](/api/loaders/assets-loader.md): The AssetsLoader processes image and other static assets (video, audio, etc.) in your React Native application. It handles asset extraction, copying files to the appropriate platform-specific output directories, and supports additional features like base64 inlining and conversion into remote assets. :::info Platform-Specific Output
By default, extracted asset files are copied to assets/ directory for iOS and drawable-* directories (e.g. drawable-mdpi, drawable-hdpi, etc.) for Android which matches Metro's asset handling behavior.
::: :::tip Guides related to AssetsLoader
Looking to do more with your assets? Check out the guides on: Inlining assets as base64 stringsConverting to remote assetsAdding SVG support :::
- [BabelLoader](/api/loaders/babel-loader.md): The BabelLoader runs Babel transformations for JavaScript and TypeScript sources in React Native projects. It chooses the parser based on source type: hermes-parser for JavaScript and Flow-typed files, and Babel's standard parser for TypeScript files. :::info How this loader differs from babel-loader There are two similarly named loaders: @callstack/repack/babel-loader (this loader) and babel-loader from npm. This loader is tailored for Re.Pack and aims for Metro parity, so the same Babel config used in Metro works as-is in Re.Pack. It automatically selects the parser by source type (Hermes parser for JS/JSX and Flow, Babel parser for TypeScript). It is also optimized for parallel transforms. In Rspack, enable experiments.parallelLoader to fan out transforms; in webpack, pair it with thread-loader to run a worker pool. On projects with heavier Babel pipelines, this often translates into noticeably faster builds. :::
- [BabelSwcLoader](/api/loaders/babel-swc-loader.md): The BabelSwcLoader pairs Babel with SWC to deliver faster builds without sacrificing compatibility with complex Babel setups. It first runs Babel to respect your project’s configuration, then hands off the supported transforms to SWC. This loader can be used universally—even if your project does not have SWC. When SWC isn’t available, it cleanly falls back to pure Babel transforms, so you can adopt it incrementally without extra setup.
SWC can be provided either by Rspack (via its built-in integration) or by installing @swc/core in your project. :::danger Heads up!
Do not use @callstack/repack/babel-swc-loader together with getJSTransformRules. They overlap in functionality and will duplicate transforms when combined in one configuration. It might often result in code that's malformed and won't execute properly in the target mobile environment.
::: :::tip Maximizing performance
For optimal performance, enable Rspack’s parallel transforms with experiments.parallelLoader. This allows for transformations to run in parallel through worker threads managed by Rspack.
::: :::details How does this loader work?
The loader reads your Babel config and checks each plugin against a capability map to see if SWC can produce the same semantics. From that, it builds two ordered sets: transforms that stay in Babel and transforms handed off to SWC. This preserves your original plugin order and avoids behavior changes. Babel runs first and executes only the Babel‑only pieces while adding the minimal syntax support your sources need (for example, TS/TSX and Hermes‑compatible parsing where applicable). SWC then runs on the result with a generated configuration (including targets and optional lazy imports) and applies its share of the work. Each transform is applied once—never duplicated—and the output matches what you’d get from Babel alone. If SWC isn’t available, the SWC step is skipped and Babel handles everything.
:::
- [FlowLoader](/api/loaders/flow-loader.md): The FlowLoader removes Flow type annotations from JavaScript files, ensuring they can be processed by loaders that do not support Flow syntax. It should be positioned before other loaders (e.g. builtin:swc-loader) to prevent parsing errors when encountering Flow-specific code. :::details
This loader uses flow-remove-types under the hood. You can learn more about it here.
:::
- [ReactRefreshLoader](/api/loaders/react-refresh-loader.md): The ReactRefreshLoader enables React Fast Refresh for React components in React Native applications. :::info
This loader is automatically added to your configuration when Hot Module Replacement (HMR) is enabled. By default, it's configured to process all JavaScript and TypeScript files outside of the node_modules directory. You don't need to add it manually to your configuration unless you need to enable React Refresh for some of the node modules.
::: :::details
The loader works similarly to Rspack's builtin:react-refresh-loader from @rspack/plugin-react-refresh, but is specifically tailored to account for React Native runtime specifics. It appends necessary runtime code to register and refresh React components, ensuring proper HMR functionality in a React Native environment.
:::
- [RepackPlugin](/api/plugins/repack.md): This is the main plugin that enables React Native app development & bundling with Re.Pack and should be included in all of your configurations. It abstracts the configuration of other core internal plugins into one plugin. :::warning About internal plugins Plugins configured by the RepackPlugin are considered internal and there is no need to use or configure them directly. Their use is heavily discouraged and they are only included for the sake of completeness of the API. You can learn more about internal plugins here. :::
- [ModuleFederationPluginV1](/api/plugins/module-federation-v1.md): :::caution Deprecated
This plugin is deprecated and maintained only for compatibility reasons. You should be using Module Federation Plugin V2
which provides enhanced features like dynamic type hinting, manifest support and Federation Runtime - learn more in the Module Federation 2.0 documentation.
::: This plugin is designed to configure Module Federation. It's an enhanced version of the standard Module Federation plugin that's specifically tailored for React Native environments. :::info About configuration options This documentation describes only Re.Pack-specific configuration options. For the complete configuration reference, please use the official bundler specific documentation: Rspack's ModuleFederationPluginWebpack's ModuleFederationPlugin :::
- [ModuleFederationV2Plugin](/api/plugins/module-federation-v2.md): This plugin is designed to configure Module Federation 2.0. It's an enhanced version of the standard Module Federation plugin that's specifically tailored for React Native environments. :::info About configuration options
This documentation describes only Re.Pack-specific configuration options. For the complete configuration reference, please see the official Module Federation 2.0 documentation. All standard Module Federation 2.0 options are supported in addition to the options described below.
:::
- [CodeSigningPlugin](/api/plugins/code-signing.md): This plugin can be used to sign chunks so that their integrity can be verified before execution. You should consider code-signing your chunks when you are using code splitting or ModuleFederation and want to deliver parts of your code remotely to the end-user.
- [HermesBytecode Plugin](/api/plugins/hermes-bytecode.md): This plugin is converts JavaScript chunks into Hermes bytecode for production-level performance optimization.
It also converts related source maps to be compatible with bytecode bundles. :::warning Remember to exclude the main bundle!
If you enable Hermes in your project, your index.bundle file and it's source-map will be transformed by react-native.
You should exclude it from the plugin to avoid processing it twice.
::: :::details Implementation details
This plugin will only transform assets that are emitted after the compilation. To ensure that asset is always emitted we disable the compareBeforeEmit option which is enabled by default in Rspack/webpack. compareBeforeEmit option is used to skip emitting assets that are identical to the
ones present in build directory, which might result in transformation being
skipped when there is a untransformed bundle present in the build directory. Since this plugin is only meant to be used as a production-level optimization, it should not affect your development experience.
:::
- [Internal plugins](/api/plugins/internal.md)
- [Constants](/api/utils/constants.md)
- [getAssetExtensionsRegExp](/api/utils/get-asset-extension-regexp.md): Creates a RegExp from an array of asset extensions.
- [getAssetTransformRules](/api/utils/get-asset-transform-rules.md): A helper function that generates module.rules configuration for handling assets in React Native applications. :::tip
This helper function allows you to create a single configuration for all assets in your project. If you need more granular control over asset processing, refer to the assetsLoader documentation.
:::
- [getCodegenTransformRules](/api/utils/get-codegen-transform-rules.md): A helper function that returns module.rules configuration for handling React Native codegen transformation, which is required for projects using New Architecture. :::info
This helper function is a part of getJsTransformRules.
::: :::warning
This helper function is only relevant when using Rspack as your bundler. If you are using webpack with babel, you don't need to use this helper function, since it's already included as part of @react-native/babel-preset.
:::
- [getDirname](/api/utils/get-dirname.md): Convert a file:/// URL to an absolute directory path. This utility is particularly useful in ESM Rspack/webpack configs where __dirname is not available.
- [getFlowTransformRules](/api/utils/get-flow-transform-rules.md): A helper function that generates module.rules configuration for handling Flow type annotations in JavaScript files. The rules use @callstack/repack/flow-loader to remove Flow types from the code before other processing. :::info
This helper function is a part of getJsTransformRules.
::: :::warning
This helper function is only relevant when using Rspack as your bundler. If you are using webpack with babel, you don't need to use this helper function, since it's already included as part of @react-native/babel-preset.
:::
- [getJsTransformRules](/api/utils/get-js-transform-rules.md): A helper function that generates Rspack module.rules configuration for transforming JavaScript, TypeScript, and Flow files. You can consider it an equivalent of @react-native/babel-preset, but for SWC. :::info
This helper function combines other helper functions, preconfigured for convenience: getSwcLoaderOptionsgetFlowTransformRulesgetCodegenTransformRules ::: :::warning
This helper function is only relevant when using Rspack as your bundler. If you are using webpack with babel, you don't need to use this helper function, since it's already included as part of @react-native/babel-preset. You can consider it an equivalent of @react-native/babel-preset, but for SWC.
:::
- [getModulePaths](/api/utils/get-module-paths.md): A helper function that generates regular expressions for matching module paths across different package manager formats (npm, yarn, pnpm, bun). You can use these regex patterns in your Rspack/webpack configuration to properly resolve modules regardless of which package manager you use.
- [getResolveOptions](/api/utils/get-resolve-options.md): Get resolve options preset to properly resolve files within the project. The preset matches closely Metro's behavior. resolve platform extensions (e.g. file.ios.js)resolve native extensions (e.g. file.native.js)optionally use package exports (exports field in package.json) instead of main fields (e.g. main or browser or react-native)
- [getSwcLoaderOptions](/api/utils/get-swc-loader-options.md): A helper function that creates SWC loader configuration options optimized for React Native bundling. :::info
This helper function is a part of getJsTransformRules.
:::

## Others

- [](/404.md)