#Migrating from Metro

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:

npm install -D @rspack/core @swc/helpers @callstack/repack

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):

module.exports = {
  commands: require('@callstack/repack/commands/rspack'),
};

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.

import path from 'node:path';
import { fileURLToPath } from 'node:url';
import * as Repack from '@callstack/repack';

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

/**
 * Rspack configuration enhanced with Re.Pack defaults for React Native.
 *
 * Learn about Rspack configuration: https://rspack.dev/config/
 * Learn about Re.Pack configuration: https://re-pack.dev/docs/guides/configuration
 */

export default {
  context: __dirname,
  entry: './index.js',
  resolve: {
    ...Repack.getResolveOptions(),
  },
  module: {
    rules: [
      ...Repack.getJsTransformRules(),
      ...Repack.getAssetTransformRules(),
    ],
  },
  plugins: [new Repack.RepackPlugin()],
};

#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:

1. Click on the project in Project navigator panel on the left
2. Go to Build Phases tab
3. Expand Bundle React Native code and images phase
4. Add following content to the phase:

if [[ -f "$PODS_ROOT/../.xcode.env" ]]; then
source "$PODS_ROOT/../.xcode.env"
fi
if [[ -f "$PODS_ROOT/../.xcode.env.local" ]]; then
source "$PODS_ROOT/../.xcode.env.local"
fi

export CLI_PATH="$("$NODE_BINARY" --print "require('path').dirname(require.resolve('@react-native-community/cli/package.json')) + '/build/bin.js'")"

After the change, the content of this phase should look similar to:

1set -e
2
3WITH_ENVIRONMENT="$REACT_NATIVE_PATH/scripts/xcode/with-environment.sh"
4REACT_NATIVE_XCODE="$REACT_NATIVE_PATH/scripts/react-native-xcode.sh"
5
6if [[ -f "$PODS_ROOT/../.xcode.env" ]]; then
7source "$PODS_ROOT/../.xcode.env"
8fi
9if [[ -f "$PODS_ROOT/../.xcode.env.local" ]]; then
10source "$PODS_ROOT/../.xcode.env.local"
11fi
12
13export CLI_PATH="$("$NODE_BINARY" --print "require('path').dirname(require.resolve('@react-native-community/cli/package.json')) + '/build/bin.js'")"
14
15/bin/sh -c "$WITH_ENVIRONMENT $REACT_NATIVE_XCODE"

#5. Install CocoaPods dependencies

For iOS development, you need to install CocoaPods dependencies. From the project root directory run:

npx pod-install

This will install all the necessary iOS dependencies for your project, including the Re.Pack native module.