Migrating from Community CLI

  1. Install dev dependencies:

    npm
    yarn
    pnpm
    bun
    npm install @rnef/cli @rnef/plugin-metro @rnef/platform-android @rnef/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 .rnef/ folder with caches to .gitignore:

    .gitignore
    .rnef/
  4. Add rnef.config.mjs file:

    rnef.config.mjs
    // @ts-check
    import { platformIOS } from '@rnef/platform-ios';
    import { platformAndroid } from '@rnef/platform-android';
    import { pluginMetro } from '@rnef/plugin-metro';
    
    /** @type {import('@rnef/config').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 rnef.config.mjs, for example:

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

    translates to:

    rnef.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/@rnef/cli/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', 'rnef', 'config', '-p', 'android']) }
  6. Update iOS files:

    In ios/Podfile change:

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

    In ios/<ProjectName>.xcodeproj/project.pbxproj update the shellScript:

    Bundle React Native code and images
    # shellScript = "set -e\n\nWITH_ENVIRONMENT=\"$REACT_NATIVE_PATH/scripts/xcode/with-environment.sh\"\nREACT_NATIVE_XCODE=\"$REACT_NATIVE_PATH/scripts/react-native-xcode.sh\"\n\n/bin/sh -c \"$WITH_ENVIRONMENT $REACT_NATIVE_XCODE\"\n";
    shellScript = "bash -l -c \"${PROJECT_DIR}/react-native-xcode.sh\"\n";

    Next, create ios/react-native-xcode.sh based on this template. You can move there any custom code you previously had as part of the "Bundle React Native code and images" Build Phase in Xcode.

  7. Cleanup native files:

    git clean -fdx ios/ android/
  8. Run new commands:

    npx rnef run:android
    npx rnef 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
  9. Configure GitHub Actions for remote builds in your workflow

    iOS:

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

    Android:

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

    For more setup options see GitHub Actions configuration