link-assets command error

[teivienn]

Environment

System:
  OS: macOS 15.1.1
  CPU: (8) arm64 Apple M1
  Memory: 120.53 MB / 16.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 20.9.0
    path: /usr/local/bin/node
  Yarn:
    version: 1.22.22
    path: /usr/local/bin/yarn
  npm:
    version: 10.8.3
    path: /usr/local/bin/npm
  Watchman:
    version: 2024.11.11.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.16.2
    path: /opt/homebrew/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 24.1
      - iOS 18.1
      - macOS 15.1
      - tvOS 18.1
      - visionOS 2.1
      - watchOS 11.1
  Android SDK:
    API Levels:
      - "33"
      - "34"
      - "35"
    Build Tools:
      - 30.0.0
      - 30.0.3
      - 33.0.0
      - 33.0.1
      - 33.0.2
      - 34.0.0
      - 35.0.0
    System Images:
      - android-28 | Google ARM64-V8a Play ARM 64 v8a
      - android-31 | Google Play ARM 64 v8a
      - android-33-ext5 | Google Play ARM 64 v8a
      - android-33 | Google APIs ARM 64 v8a
      - android-33 | Google Play ARM 64 v8a
      - android-34 | Google Play ARM 64 v8a
      - android-35 | Google APIs ARM 64 v8a
      - android-35 | Google Play ARM 64 v8a
    Android NDK: Not Found
IDEs:
  Android Studio: 2024.2 AI-242.23339.11.2421.12700392
  Xcode:
    version: 16.1/16B40
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.10
    path: /usr/bin/javac
  Ruby:
    version: 2.7.6
    path: /Users/nei/.rbenv/shims/ruby
npmPackages:
  "@react-native-community/cli":
    installed: 15.1.3
    wanted: 15.1.3
  react:
    installed: 18.3.1
    wanted: 18.3.1
  react-native:
    installed: 0.76.3
    wanted: 0.76.3
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: true
iOS:
  hermesEnabled: true
  newArchEnabled: true

info React Native v0.76.5 is now available (your project is running on v0.76.3).

Description

I get the error “error: unknown command ‘link-assets’ when I try to execute the command npx react-native link-assets

I followed this guide completely, but the command doesn't work for some reason.

I have the following packages installed

    "@react-native-community/cli": "15.1.3",
    "@react-native-community/cli-link-assets": "15.1.3",
    "@react-native-community/cli-platform-android": "15.1.3",
    "@react-native-community/cli-platform-ios": "15.1.3",

Reproducible Demo

Link to repository

[szymonrybczak]

hey @teivienn, what's the output of npx react-native?

[teivienn]

hey @teivienn, what's the output of npx react-native?

Hey @szymonrybczak

npx react-native output

Usage: react-native [command] [options]

Options:
  -v --version                  Output the current version
  -h, --help                    display help for command

Commands:
  config [options]              Print CLI configuration
  clean [options]               Cleans your project by removing React Native related caches and modules.
  info [options]                Get relevant version info about OS, toolchain and libraries
  bundle [options]              Build the bundle for the provided JavaScript entry file.
  start [options]               Start the React Native development server.
  codegen [options]
  log-ios [options]             starts iOS device syslog tail
  run-ios [options]             builds your app and starts it on iOS simulator
  build-ios [options]           builds your app for iOS platform
  log-android [options]         starts logkitty
  run-android [options]         builds your app and starts it on a connected Android emulator or device
  build-android [options]       builds your app
  init [options] [projectName]  New app will be initialized in the directory of the same name. Android and iOS projects will use this name for publishing setup.
  doctor [options]              Diagnose and fix common Node.js, iOS, Android & React Native issues.
  help [command]                display help for command

And I also created a repository to reproduce

[Nova41]

Can confirm that npx rnc-cli link-assets complains about the command is not found too.

[Nova41]

I did a little digging - This is likely expected.

The original PR for the command link-assets is here. Judging from the comments, the command has been implemented by fabioh8010 but intentionally not exposed to users:

thymikee commented on Mar 18

Ok I got a look at this PR and I have doubts exposing it to users. This commands works in a legacy way of manually changing Xcode and Gradle files – even asking users to do so. I hoped it would leverage the autolinking mechanism so that DX is nicer.

[...]

The subsequent commit removed this command from the entrypoint CLI package so it won't show up in the list as expected.

For anyone in emergency, you can use the command with a simple patch to the cli package.

1. You do need to add the cli-link-assets package to node_modules first. Use npm, yarn, bun, whatever.

npm add -D @react-native-community/cli-link-assets

2. Add the following changes to node_modules/@react-native-community/cli/build/commands/index.js (this is essentially emulating importing the link-assets command as a module and appending it to the projectCommands array):

// ...
// L20
  function _cliConfig() {
    const data = require("@react-native-community/cli-config");
    _cliConfig = function () {
      return data;
    };
    return data;
  }
+ function _cliLinkAssets() {
+   const data = require("@react-native-community/cli-link-assets");
+   _cliLinkAssets = function () {
+     return data;
+   };
+   return data;
+ }

  var _init = _interopRequireDefault(require("./init"));
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
- const projectCommands = [..._cliConfig().commands, _cliClean().commands.clean, _cliDoctor().commands.info];
+ const projectCommands = [..._cliConfig().commands, _cliClean().commands.clean, _cliDoctor().commands.info, _cliLinkAssets().commands.linkAssets];
// L38
// ...

Then run npx rnc-cli, the command should be picked up by the CLI and work as expected.

% npx rnc-cli                                        
Usage: rnc-cli [command] [options]

Options:
  -v --version                  Output the current version
  -h, --help                    display help for command

Commands:
  config [options]              Print CLI configuration
  clean [options]               Cleans your project by removing React Native related caches and modules.
  info [options]                Get relevant version info about OS, toolchain and libraries
  link-assets [options]         Links your assets to Android / iOS projects.
  bundle [options]              Build the bundle for the provided JavaScript entry file.
  start [options]               Start the React Native development server.
  codegen [options]
  log-ios [options]             starts iOS device syslog tail
  run-ios [options]             builds your app and starts it on iOS simulator
  build-ios [options]           builds your app for iOS platform
  log-android [options]         starts logkitty
  run-android [options]         builds your app and starts it on a connected Android emulator or device
  build-android [options]       builds your app
  init [options] [projectName]  New app will be initialized in the directory of the same name. Android and iOS projects will use this name for publishing setup.
  doctor [options]              Diagnose and fix common Node.js, iOS, Android & React Native issues.
  help [command]                display help for command

% npx rnc-cli link-assets
info Linking your assets...
info Relinking old ttf assets from Android project to use XML resources
warn The old Android font assets were relinked in order to use XML resources. Please refer to this guide to update your application's code as well: https://github.com/callstack/react-native-asset#font-assets-linking-and-usage
success Done 🎉

While this workaround works, the command is hidden for a reason. This is not the intended way to use it, and it's the best to hear from them about its latest state. Anyways, I appreciate the fantastic work done by fabioh8010 and the judicious decision from thymikee.

[teivienn]

@Nova41 Thanks you for the research

I think it would be nice to put in the documentation about this command that it is hidden, or allow its users, but with a description of the nuances of it

[szymonrybczak]

@teivienn @Nova41 are you able to contribute the change to docs on how to include the link-assets command inside the project? 🙏

[Nova41]

@teivienn @Nova41 are you able to contribute the change to docs on how to include the link-assets command inside the project? 🙏

I’ll be more than happy to, just want to confirm whether this is okay with appropriate handles. Feels a bit hacky about my approach 🙂

[szymonrybczak]

@Nova41 cool! You can achieve the same result with following react-native.config.js file in your project file:

const linkAssets = require('@react-native-community/cli-link-assets');

module.exports = {
  commands: [linkAssets.commands.linkAssets],
};

I think that's the best convention :)

[dppo]

@Nova41 cool! You can achieve the same result with following react-native.config.js file in your project file:

const linkAssets = require('@react-native-community/cli-link-assets');

module.exports = {
  commands: [linkAssets.commands.linkAssets],
};

I think that's the best convention :)

it works, thanks

[Nova41]

@Nova41 cool! You can achieve the same result with following react-native.config.js file in your project file:

const linkAssets = require('@react-native-community/cli-link-assets');

module.exports = {
  commands: [linkAssets.commands.linkAssets],
};

I think that's the best convention :)

That’s neat. I can work on the PR after I get off my work.

[Nova41]

@szymonrybczak – I’ve opened a PR at issue #2568 that explains how to enable the command and why it’s currently not shipped by default. Please let me know if these changes meet your expectations.

[umardev500]

same too mee

[waqas19921]

Use this package instead https://github.com/callstack/react-native-asset