# 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). 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.
- [Module Federation](/docs/features/module-federation.md): Module Federation lets a host application load code from separately built remotes at runtime. Re.Pack supports Module Federation 2.0 through ModuleFederationPluginV2, which adds React Native defaults on top of the official @module-federation/enhanced plugin: shared react and react-native, the loaded-first share strategy, and runtime plugins that load remotes through ScriptManager. For the concepts and the limitations of microfrontends on mobile, read Microfrontends first. For every plugin option, see the ModuleFederationPluginV2 reference.
- [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): 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.
- [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.
- [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.
- [SVG support](/docs/guides/svg.md): By default, Re.Pack's Assets loader is configured to allow you to import SVGs in your code, but that doesn't mean you can render them immediately.
- [Using custom fonts](/docs/guides/fonts.md): Font files (ttf and otf) are processed by the Assets loader like any other asset, so you can require or import them from JavaScript. How you load the font afterwards depends on whether it is used by a JavaScript library or by native <Text> components.
- [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. 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.
- [Migrating from Re.Pack 4](/docs/migration-guides/repack-v4.md)
- [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.
- [Glossary of terms](/docs/resources/glossary.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.
- [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.
- [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. Android resource directories When bundling for Android without the development server, extracted assets are placed in the following resource directories: xml and ttc are not included in the default asset extensions, so getAssetTransformRules() doesn't process them. To bundle them, add a rule that uses the Assets loader for these extensions. Font binaries are emitted twice: the font copy keeps native references such as @font/... and R.font working, while the raw copy lets libraries that load fonts by name at runtime (e.g. React Native Skia) find them the same way they do with Metro. Re.Pack also generates raw/keep.xml listing all bundled Android resources. Assets loaded by name from JavaScript are invisible to the resource shrinker, so this file keeps them in the APK when shrinkResources is enabled.
- [BabelLoader](/api/loaders/babel-loader.md): The BabelLoader runs Babel transformations for JavaScript and TypeScript sources in React Native projects. For JavaScript and Flow-typed files, it selects the parser used by your installed @react-native/babel-preset: flow-parser when declared by the preset, otherwise hermes-parser from the preset's syntax plugin. TypeScript and TSX files use Babel's standard parser.
- [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. For JavaScript and Flow-typed files, the loader selects the parser used by your installed @react-native/babel-preset: flow-parser when declared by the preset, otherwise hermes-parser from the preset's syntax plugin. TypeScript and TSX files use Babel's standard parser.
- [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.
- [ReactRefreshLoader](/api/loaders/react-refresh-loader.md): The ReactRefreshLoader enables React Fast Refresh for React components in React Native applications.
- [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.
- [ModuleFederationPluginV1](/api/plugins/module-federation-v1.md): 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.
- [ModuleFederationPluginV2](/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.
- [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.
- [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.
- [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.
- [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.
- [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.
- [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.

## Others

- [404](/404.md)