link and unlink commands have been removed in the favour of autolinking #34095

zanyar3 · 2022-06-29T07:00:28Z

Description

I want add custom fonts for react native project.
after add fonts and config files need link project for add font for Android and iOS respectively.

But when run npx react-native link have a error Unrecognized command "link".

Version

0.69

Output of `npx react-native info`

System:
    OS: Windows 10 10.0.19042
    CPU: (4) x64 Intel(R) Core(TM) i7-4600U CPU @ 2.10GHz
    Memory: 789.02 MB / 7.88 GB
  Binaries:
    Node: 16.14.0 - C:\Program Files\nodejs\node.EXE
    Yarn: Not Found
    npm: 8.3.1 - C:\Program Files\nodejs\npm.CMD
    Watchman: Not Found
  SDKs:
    Android SDK: Not Found
    Windows SDK: Not Found
  IDEs:
    Android Studio: AI-212.5712.43.2112.8512546
    Visual Studio: 17.2.32602.215 (Visual Studio Community 2022)
  Languages:
    Java: 11.0.13
  npmPackages:
    @react-native-community/cli: Not Found
    react: 18.0.0 => 18.0.0
    react-native: 0.69.0 => 0.69.0
    react-native-windows: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

Steps to reproduce

Added fonts for assets/fonts directory
Created react-native.config.js in root project folder
Added the following code inside module.exports

module.exports = {
    project: {
        ios:{},
        android:{}
    },
    assets:['./assets/fonts/'],
}

Run npx react-native link

Snack, code example, screenshot, or link to a repository

> npm react-native link
  Unknown command: "react-native"

  To see a list of supported npm commands, run:
  npm help

The text was updated successfully, but these errors were encountered:

Gitarcitano · 2022-06-29T16:11:44Z

@zanyar3
I had the same problem yesterday, but I got around it by manually installing the font.

To manually install on Android, you need to drop the files on this folder:
<yourApp>/android/app/src/main/assets/fonts

create a file in <yourApp>/android/app/src/main/java/com/<YourAppPackageName>/components/<NameThatYouWant>.java

package com.<YourAppPackageName>.components;

import android.content.Context;
import android.graphics.Typeface;
import androidx.appcompat.widget.AppCompatTextView;

import android.util.AttributeSet;

public class <NameThatYouWant> extends AppCompatTextView {

    public <NameThatYouWant>(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        init();
    }

    public <NameThatYouWant>(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public <NameThatYouWant>(Context context) {
        super(context);
        init();
    }

    public void init() {
        Typeface tf = Typeface.createFromAsset(getContext().getAssets(), "fonts/<FontFileName>.ttf");
        setTypeface(tf ,Typeface.NORMAL);

    }
}

And on iOS you must follow this guide: https://developer.apple.com/documentation/uikit/text_display_and_fonts/adding_a_custom_font_to_your_app

cortinico · 2022-06-30T14:53:10Z

But when run npx react-native link have a error Unrecognized command "link".

This is a question/issue for the CLI which lives here:
https://github.com/react-native-community/cli

pogakuofie · 2022-07-03T08:30:25Z

@zanyar3 I had the same problem yesterday, but I got around it by manually installing the font.

To manually install on Android, you need to drop the files on this folder: <yourApp>/android/app/src/main/assets/fonts

create a file in <yourApp>/android/app/src/main/java/com/<YourAppPackageName>/components/<NameThatYouWant>.java

package com.<YourAppPackageName>.components;

import android.content.Context;
import android.graphics.Typeface;
import androidx.appcompat.widget.AppCompatTextView;

import android.util.AttributeSet;

public class <NameThatYouWant> extends AppCompatTextView {

    public <NameThatYouWant>(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        init();
    }

    public <NameThatYouWant>(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public <NameThatYouWant>(Context context) {
        super(context);
        init();
    }

    public void init() {
        Typeface tf = Typeface.createFromAsset(getContext().getAssets(), "fonts/<FontFileName>.ttf");
        setTypeface(tf ,Typeface.NORMAL);

    }
}

And on iOS you must follow this guide: https://developer.apple.com/documentation/uikit/text_display_and_fonts/adding_a_custom_font_to_your_app

Thanks this worked for me.

infoSamyak · 2022-07-05T09:54:46Z

Just use npx react-native-asset

zanyar3 · 2022-07-06T06:31:04Z

Just use npx react-native-asset

only supports font files, this tool supports all assets ?

What about other library for link native code ?

infoSamyak · 2022-07-06T08:09:17Z

Just use npx react-native-asset

only supports font files, this tool supports all assets ?

What about other library for link native code ?

This solution is for RN V0.69 as it does not support react-native link command.
Other versions support link command

As for libraries, they are linked automatically when you run project on android and pod install on iOS

zanyar3 · 2022-07-06T11:04:42Z

Just use npx react-native-asset

only supports font files, this tool supports all assets ?
What about other library for link native code ?

This solution is for RN V0.69 as it does not support react-native link command. Other versions support link command

As for libraries, they are linked automatically when you run project on android and pod install on iOS

@infoSamyak I know, but only support asset link

advantages react-native-asset

AshirbadGudu · 2022-07-07T03:25:51Z

Just use npx react-native-asset

Yes, this is working for in react-native 0.69

Aszurar · 2022-07-26T19:11:32Z

Just use npx react-native-asset

Wow, thanks, thank you very much!!!, my colleagues and I have been looking into this for about 2 weeks! 🚀🚀🚀

pankti-0627 · 2022-09-13T21:02:38Z

this works for android but on iOS device getting an error of "unrecognized font family". anyone can help please?

cesarhilario · 2022-09-20T09:34:52Z

this works for android but on iOS device getting an error of "unrecognized font family". anyone can help please?

same here

fkazemi5236 · 2022-09-29T09:45:36Z

in RN +0.69 sometimes when you are trying to add your custom fonts, you may saw this error :

'react-native-asset' is not recognized as an internal or external command

If you get this error first install yarn add -D react-native-asset as a dev dependency then run npx react-native-asset

it works for me ☺❤

serge-psllc · 2022-09-30T16:51:35Z

Doesn't work for me at all:

% npx react-native-asset        
node:internal/modules/cjs/loader:958
  throw err;
  ^

Error: Cannot find module '/Users/my-app-directory/react-native.config.js'
Require stack:
- /Users/sergevanneck/.npm/_npx/545c366a5ae830a2/node_modules/react-native-asset/lib/cli.js
    at Module._resolveFilename (node:internal/modules/cjs/loader:955:15)
    at Module._load (node:internal/modules/cjs/loader:803:27)
    at Module.require (node:internal/modules/cjs/loader:1021:19)
    at require (node:internal/modules/cjs/helpers:103:18)
    at Object.<anonymous> (/Users/sergevanneck/.npm/_npx/545c366a5ae830a2/node_modules/react-native-asset/lib/cli.js:45:27)
    at Module._compile (node:internal/modules/cjs/loader:1119:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1173:10)
    at Module.load (node:internal/modules/cjs/loader:997:32)
    at Module._load (node:internal/modules/cjs/loader:838:12)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/Users/sergevanneck/.npm/_npx/545c366a5ae830a2/node_modules/react-native-asset/lib/cli.js'
  ]
}

I don't use yarn so I tried with npm:

% npm install react-native-asset --save-dev
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: RoomScheduler@0.0.1
npm ERR! Found: react-native@0.70.1
npm ERR! node_modules/react-native
npm ERR!   react-native@"0.70.1" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react-native@"^0.60.0" from react-native-asset@2.0.1
npm ERR! node_modules/react-native-asset
npm ERR!   dev react-native-asset@"*" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! See /Users/sergevanneck/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/sergevanneck/.npm/_logs/2022-09-30T16_45_59_195Z-debug-0.log

With the Java code example, what am I supposed to use for "NameThatYouWant"?

devuco · 2022-10-03T04:46:14Z

Doesn't work for me at all:

% npx react-native-asset        
node:internal/modules/cjs/loader:958
  throw err;
  ^

Error: Cannot find module '/Users/my-app-directory/react-native.config.js'
Require stack:
- /Users/sergevanneck/.npm/_npx/545c366a5ae830a2/node_modules/react-native-asset/lib/cli.js
    at Module._resolveFilename (node:internal/modules/cjs/loader:955:15)
    at Module._load (node:internal/modules/cjs/loader:803:27)
    at Module.require (node:internal/modules/cjs/loader:1021:19)
    at require (node:internal/modules/cjs/helpers:103:18)
    at Object.<anonymous> (/Users/sergevanneck/.npm/_npx/545c366a5ae830a2/node_modules/react-native-asset/lib/cli.js:45:27)
    at Module._compile (node:internal/modules/cjs/loader:1119:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1173:10)
    at Module.load (node:internal/modules/cjs/loader:997:32)
    at Module._load (node:internal/modules/cjs/loader:838:12)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/Users/sergevanneck/.npm/_npx/545c366a5ae830a2/node_modules/react-native-asset/lib/cli.js'
  ]
}

I don't use yarn so I tried with npm:

% npm install react-native-asset --save-dev
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: RoomScheduler@0.0.1
npm ERR! Found: react-native@0.70.1
npm ERR! node_modules/react-native
npm ERR!   react-native@"0.70.1" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react-native@"^0.60.0" from react-native-asset@2.0.1
npm ERR! node_modules/react-native-asset
npm ERR!   dev react-native-asset@"*" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! See /Users/sergevanneck/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/sergevanneck/.npm/_logs/2022-09-30T16_45_59_195Z-debug-0.log

With the Java code example, what am I supposed to use for "NameThatYouWant"?

Did you create the react-native.config.js?

usfslk · 2023-02-10T06:39:33Z

This is ridiculous

sapsharma · 2024-02-29T05:17:39Z

PS D:\Adminpanel> react-native link react-native-image-picker
error: unknown command 'link'

not wrking

zanyar3 added the Needs: Triage 🔍 label Jun 29, 2022

react-native-bot added the API: Linking label Jun 29, 2022

cortinico closed this as completed Jun 30, 2022

cortinico mentioned this issue Jul 5, 2022

React-native 0.69 custom font problem #34131

Closed

ezrahnyanat mentioned this issue Oct 5, 2022

[Solution] npx react-native link for RN versions >= 0.69 kadikraman/react-native-beyond-basics#4

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

link and unlink commands have been removed in the favour of autolinking #34095

link and unlink commands have been removed in the favour of autolinking #34095

zanyar3 commented Jun 29, 2022 •

edited

Loading

Gitarcitano commented Jun 29, 2022

cortinico commented Jun 30, 2022

pogakuofie commented Jul 3, 2022

infoSamyak commented Jul 5, 2022

zanyar3 commented Jul 6, 2022

infoSamyak commented Jul 6, 2022

zanyar3 commented Jul 6, 2022

AshirbadGudu commented Jul 7, 2022

Aszurar commented Jul 26, 2022 •

edited

Loading

pankti-0627 commented Sep 13, 2022

cesarhilario commented Sep 20, 2022

fkazemi5236 commented Sep 29, 2022

serge-psllc commented Sep 30, 2022 •

edited

Loading

devuco commented Oct 3, 2022

usfslk commented Feb 10, 2023

sapsharma commented Feb 29, 2024

link and unlink commands have been removed in the favour of autolinking #34095

link and unlink commands have been removed in the favour of autolinking #34095

Comments

zanyar3 commented Jun 29, 2022 • edited Loading

Description

Version

Output of npx react-native info

Steps to reproduce

Snack, code example, screenshot, or link to a repository

Gitarcitano commented Jun 29, 2022

cortinico commented Jun 30, 2022

pogakuofie commented Jul 3, 2022

infoSamyak commented Jul 5, 2022

zanyar3 commented Jul 6, 2022

infoSamyak commented Jul 6, 2022

zanyar3 commented Jul 6, 2022

AshirbadGudu commented Jul 7, 2022

Aszurar commented Jul 26, 2022 • edited Loading

pankti-0627 commented Sep 13, 2022

cesarhilario commented Sep 20, 2022

fkazemi5236 commented Sep 29, 2022

serge-psllc commented Sep 30, 2022 • edited Loading

devuco commented Oct 3, 2022

usfslk commented Feb 10, 2023

sapsharma commented Feb 29, 2024

zanyar3 commented Jun 29, 2022 •

edited

Loading

Output of `npx react-native info`

Aszurar commented Jul 26, 2022 •

edited

Loading

serge-psllc commented Sep 30, 2022 •

edited

Loading