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

   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

   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 talkLet's talk