Migrating from Community CLI

    Automatic Migration

    You can automate all the migration steps below by running the following command in your existing React Native project. The CLI will detect your project and guide you through the migration process interactively, automatically updating all necessary files and configurations.

    npm
    yarn
    pnpm
    bun
    deno
    npm create rock

    Manual Migration

    If you prefer to do it manually or encounter any issues, follow the steps below.

    1. Install dev dependencies:

      npm
      yarn
      pnpm
      bun
      deno
      npm install -D rock @rock-js/plugin-metro @rock-js/platform-android @rock-js/platform-ios

    2. Remove @react-native-community/cli and related packages.

      npm
      yarn
      pnpm
      bun
      deno
      npm remove @react-native-community/cli @react-native-community/cli-platform-ios @react-native-community/cli-platform-android

    3. Add .rock/ folder with caches to .gitignore:

      .gitignore
      .rock/

    4. Add rock.config.mjs file:

      rock.config.mjs
      // @ts-check
import { platformIOS } from '@rock-js/platform-ios';
import { platformAndroid } from '@rock-js/platform-android';
import { pluginMetro } from '@rock-js/plugin-metro';

/** @type {import('rock').Config} */
export default {
  bundler: pluginMetro(),
  platforms: {
    ios: platformIOS(),
    android: platformAndroid(),
  },
  remoteCacheProvider: 'github-actions',
};

      Move any project config from react-native.config.js to platform arguments in rock.config.mjs, for example:

      react-native.config.js
      module.exports = {
  project: {
    ios: {
      sourceDir: 'custom-source',
    },
    android: {
      appName: 'custom',
    },
  },
};

      translates to:

      rock.config.mjs
      export default {
  platforms: {
    ios: platformIOS({ sourceDir: 'custom-source' }),
    android: platformAndroid({ appName: 'custom' }),
  },
};

    5. Update Android files:

      In android/app/build.gradle set the cliFile with the new path:

      android/app/build.gradle
      // cliFile = file("../../node_modules/react-native/cli.js")
cliFile = file("../../node_modules/rock/dist/src/bin.js")

      In android/settings.gradle change:

      android/settings.gradle
      // extensions.configure(com.facebook.react.ReactSettingsExtension){ ex -> ex.autolinkLibrariesFromCommand() }
extensions.configure(com.facebook.react.ReactSettingsExtension){ ex -> ex.autolinkLibrariesFromCommand(['npx', 'rock', 'config', '-p', 'android']) }

    6. Update iOS files:

      In ios/Podfile change:

      ios/Podfile
      # config = use_native_modules!
config = use_native_modules!(['npx', 'rock', 'config', '-p', 'ios'])

      In "Bundle React Native code and images" Build Phase in Xcode add:

      Bundle
      set -e
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 CONFIG_CMD="dummy-workaround-value"
export CLI_PATH="$("$NODE_BINARY" --print "require('path').dirname(require.resolve('rock/package.json')) + '/dist/src/bin.js'")"
WITH_ENVIRONMENT="$REACT_NATIVE_PATH/scripts/xcode/with-environment.sh"

    7. Cleanup native files:

      git clean -fdx ios/ android/

    8. Update scripts in package.json:

      package.json
      {
  "scripts": {
    "start": "rock start",
    "android": "rock run:android",
    "ios": "rock run:ios"
  }
}

    9. Run new commands:

      npx rock run:android
npx rock run:ios

      Additionally rename flags:

      • --mode to --variant for Android commands
      • --mode to --configuration for iOS commands
      • --buildFolder to --build-folder for iOS commands
      • --appId to --app-id for Android commands
      • --appIdSuffix to --app-id-suffix for Android commands

      And remove unsupported flags:

      • --interactive/-i – the CLI will prompt you for input where necessary
      • --list-devices - when no devices are connected, you'll be prompt with a full device selection

    10. Configure GitHub Actions for remote builds in your workflow

      iOS:

      .github/workflows/build-ios
      - name: Rock Remote Build - iOS simulator
  id: rock-remote-build-ios
  uses: callstackincubator/ios@v3
  with:
    destination: simulator
    github-token: ${{ secrets.GITHUB_TOKEN }}
    configuration: Debug

      Android:

      .github/workflows/build-android
      - name: Rock Remote Build - Android
  id: rock-remote-build-android
  uses: callstackincubator/android@v3
  with:
    variant: debug
    github-token: ${{ secrets.GITHUB_TOKEN }}

      For more setup options see GitHub Actions configuration

    Need React or React Native expertise you can count on?

    Let's talk