This should ignored by default as it's generally something you don't want to be linked :)

I got this error when copy assets
const existingFonts = (plist.UIAppFonts || [])

in a react-native project where gitignore is purposely ignoring all files in the android\app\src\main\assets folder, but the link-assets-manifest.json file is in source control. Someone building the project on a new machine will use the react-native-asset command line but the asset files will not be copied to the android\app\src\main\assets folder because the link-assets-manifest.json file is up to date. The assets will not be available on the Android device and it can take many, many hours to figure out why.

Suggested improvement would be to check both if the asset file exists in the link-assets-manifest.json file and also if it physically exists in the android\app\src\main\assets folder and copy it there if not.

When I try to add a ttc font, it seems that react-native-asset places it in the custom folder for Android, instead of the fonts directory.

With react-native-asset 2.0.1, the plist dependency (^3.0.1) has a xmldom dependency (^0.5.0) which has a vulnerability issue

Support for expo could be added via the expo-dev-client and plugins, so it would be possible to add a font without having to wait for it to load at runtime

Looks like react-native-asset is looking for ios/XXX.xcodeproj/project.pbxproj'.
I have not that file. My file is ios/XXX.xcodeproj/project.xcworkspace.

I'm using XCode 9

I want to link Robot Font Family to Android and SF-Pro-Display/SF-Pro-Text to iOS . should I create separate subfolders in assets folder something like assets/ios/fonts , assets/android/fonts ? ... and link something like

react-native-asset -ios-a /assets/ios/fonts --ios-assets
react-native-asset -android-a /assets/android/fonts --android-assets

and package.json would be like ?

"rnpm": {
    "assets": [
      "assets/ios/fonts",
      "assets/android/fonts"
    ]
  }

After running npm install react-native-asset -g, and then running react-native start --reset-cache, and then starting my iOS simulator, I get an error in the bundler terminal and also in the simulator:

error: bundling failed: Error: Unable to resolve module `./../../../../../../usr/local/lib/node_modules/react-native/node_modules/react-transform-hmr/lib/index.js` from `/Users/me/Sites/my-app/app/appEntry/appEntry.js`: The module `./../../../../../../usr/local/lib/node_modules/react-native/node_modules/react-transform-hmr/lib/index.js` could not be found from `/Users/me/Sites/my-app/app/appEntry/appEntry.js`. Indeed, none of these files exist:
  * `/usr/local/lib/node_modules/react-native/node_modules/react-transform-hmr/lib/index.js(.native||.ios.js|.native.js|.js|.ios.json|.native.json|.json|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx)`
  * `/usr/local/lib/node_modules/react-native/node_modules/react-transform-hmr/lib/index.js/index(.native||.ios.js|.native.js|.js|.ios.json|.native.json|.json|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx)`
    at ModuleResolver.resolveDependency (/usr/local/lib/node_modules/react-native/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:163:15)
    at ResolutionRequest.resolveDependency (/usr/local/lib/node_modules/react-native/node_modules/metro/src/node-haste/DependencyGraph/ResolutionRequest.js:52:18)
    at DependencyGraph.resolveDependency (/usr/local/lib/node_modules/react-native/node_modules/metro/src/node-haste/DependencyGraph.js:283:16)
    at Object.resolve (/usr/local/lib/node_modules/react-native/node_modules/metro/src/lib/transformHelpers.js:264:42)
    at /usr/local/lib/node_modules/react-native/node_modules/metro/src/DeltaBundler/traverseDependencies.js:399:31
    at Array.map (<anonymous>)
    at resolveDependencies (/usr/local/lib/node_modules/react-native/node_modules/metro/src/DeltaBundler/traverseDependencies.js:396:18)
    at /usr/local/lib/node_modules/react-native/node_modules/metro/src/DeltaBundler/traverseDependencies.js:269:33
    at Generator.next (<anonymous>)
    at asyncGeneratorStep (/usr/local/lib/node_modules/react-native/node_modules/metro/src/DeltaBundler/traverseDependencies.js:87:24)
 BUNDLE  [ios, dev] ./index.js ░░░░░░░░░░░░░░░░ 0.0% (0/1), failed.

In order to fix this,
npm uninstall react-native-asset
npm install react-native-cli
and to further clean things up
npm uninstall react -g

I'm guessing the problem is with package.json including

"peerDependencies": {
    "react-native": "^0.60.0"
  },

I can still use react-native-asset as a non-global install, and call it like ./node_modules/.bin/react-native-asset.

Context

used ignite boilerplate this potentially changes iOS folder structure

Steps to reproduce

• added custom font to ./assets/fonts

|
|_ assets
|_|_ fonts
|_|_|_ font-name
|_|_|_|_ ttf-file-name.ttf

• changed react-native.config.js

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

• ran npx react-native-asset
• android builds fine and fonts are correct
• iOS fails build with No such file or directory found on each of my ttf files

Steps that I did to fix

• in the file ios/projectName.xcodeproj/project.pgxproj under the /* Begin PBXFileReference section */ replaced every ../assets/fonts/font-name/ttf-file-name.ttf with an extra ../ to make ../../assets/fonts/font-name/ttf-file-name.ttf

before

197A7A355453429EBCF9A29A /* ttf-file-name.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = "ttf-file-name.ttf"; path = "../assets/fonts/font-name/ttf-file-name.ttf"; sourceTree = "<group>"; };

after

197A7A355453429EBCF9A29A /* ttf-file-name.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = "ttf-file-name.ttf"; path = "../../assets/fonts/font-name/ttf-file-name.ttf"; sourceTree = "<group>"; };

Installing this package with RN 0.63.4 I get this warning. Check with npm ls.

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch [email protected] for the project I'm working on.

When only using this package for android it fails on not finding iOS xcodeproj file. It's not null but undefined.

Here is the diff that solved my problem:

diff --git a/node_modules/react-native-asset/lib/get-config.js b/node_modules/react-native-asset/lib/get-config.js
index 24c7735..76e8dc6 100644
--- a/node_modules/react-native-asset/lib/get-config.js
+++ b/node_modules/react-native-asset/lib/get-config.js
@@ -9,7 +9,7 @@ module.exports = ({ rootPath }) => {
   const xcodeprojName = iosExists
     ? fs.readdirSync(iosPath).find(file => path.extname(file) === '.xcodeproj')
     : null;
-  const pbxprojPath = (xcodeprojName !== null)
+  const pbxprojPath = (xcodeprojName != undefined)
     ? path.resolve(iosPath, xcodeprojName, 'project.pbxproj')
     : null;
 

This issue body was partially generated by patch-package.

This is related to react-native-community/cli#1173

$ npx react-native-asset
info Linking otf assets to iOS project 
WARN ERRGROUP Group 'Resources' does not exist in your Xcode project. We have created it automatically for you.
Cannot read property 'UIAppFonts' of null

Maybe this tool could print out a better error message?

Hi!

rnpm will stop working from next release, the next configuration file will be react-native.config.js

Reference: react-native-community/cli/blob/master/docs/configuration.md#migration-guide

Does this module support the use of iOS Schemas en android Flavors?

react-native supports not only ttf files
https://github.com/facebook/react-native/blob/1151c096dab17e5d9a6ac05b61aacecd4305f3db/ReactAndroid/src/main/java/com/facebook/react/views/text/ReactFontManager.java#L34

this library is adding otf font to assets/custom

Hi @unimonkiez 👋 , I hope you are doing well! Over the past months, I've observed that updates to the library have been infrequent, and there are a few pending PRs and issues. Given its importance, I'm concerned about the project becoming stale. I've previously contributed to improve Android fonts linking process, and I am deeply invested in the continued maintenance of this library.

I would like to offer my assistance in maintaining this project. I understand that maintaining an open-source library can be time-consuming and sometimes overwhelming, and I would love to share the responsibility or take up a more active role, if you are open to it. We have plans to integrate this tool into the CLI and maybe Expo as well, and continuing to explore solutions to better handle the linking of assets in a React Native project.

If you are open to the idea, I would love to discuss with you. If you have reservations or if there are reasons the library hasn't been updated recently that I'm unaware of, please let me know.

Thanks!

In my project, I have frequently changing assets it seems that this tool doesn't overwrite them.
However, link-assets-manifest.json updates with a new hash.

Hi! This is probably half an issue, half a question, but here goes. TL;DR at the bottom.

We ran into an issue where we had a custom font called Filson, to be used in our branding; specifically, we had only one font file and weight, Filson Soft Black.

We had react-native-asset install it into our iOS and Android bundle. On iOS, it worked fine; I think iOS is very forgiving when it comes to fonts and specifically font weights, it used the correct font and weight.

But it seems Android is a bit more picky, and will fall back on the system font if the right font family, file, and font weights are not found.

After a lot of trial, error and head banging against the wall, I found a solution for the issue we had; following this guide, we added an XML file to the Android resource bundle alongside the font file that declared the font name (resource) and supported weights.

But, that xml file had to be put right into the Android folder of the specific app; when we put it alongside the font file in our shared resources folder (we have multiple apps in one repository btw), the font file is copied as-is but the accompanying XML file is copied to a "custom" folder.

TL;DR: Is it possible to copy Android font family declaration XML files to the same folder as the font files themselves? The current behaviour is that the accompanying XML files are copied to a 'custom' folder instead, which is not correct. (it might work, but I haven't actually tried it; the guide linked above indicates the XML files should be in the fonts folder)

I set project sourceDir in react-native.config.js, but it's not in use.

Here is my react-native.conf.js
module.exports = { project: { ios: { sourceDir: "./apps/mobile/ios", }, android: { sourceDir: "./apps/mobile/android", } }, assets:[ "./assets/fonts" ] }

now it just seek root path ./ios and ./android
node_modules\react-native-asset\lib\get-config.js
const iosPath = path.resolve(rootPath, 'ios'); const androidPath = path.resolve(rootPath, 'android');

When I run following commands:

$ react-native-asset ./node_modules/A/Resources
$ react-native-asset ./node_modules/B/Resources

it will end up linking only resources from module B and all resources from A will be unlinked.

So right now is impossible to use react-native-asset properly when developing third party react-native modules whose assets need to be linked. My suggestion is to add a key CLI parameter:

"rnpm": {
  "commands": {
    // relink only resources marked with "A" and mark these new resources with "A"
    "postlink": "npx react-native-asset ./node_modules/A/Resources -key A",
    // unlink only resources marked with "A"
    "postunlink": "npx react-native-asset -key A"
   }
}

I follow your instruction but I still was not able to load a png file as test.

At the end in android/app/build.gradle I added bundleInDebug: true in project.ext.react

project.ext.react = [
    entryFile: "index.js",
    bundleInDebug: true
]

After that I was able to load the image with

<Image
          source={{ uri: asset:/custom/assetlogo.png' }}
          style={{width: 400, height: 400}}
          onError={(e) => console.log('image error \n', e)}
          onLoadEnd={res => console.log('loaded end', res)}
        />

Is this the way it should be ?

New version depends on "uuid": "^7.0.3" while 2.1.0 on "uuid": "^3.3.2" which raises:

react-native-asset > xcode > [email protected]: Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v8.dev/blog/math-random for details.

Doesn't seem to work for me

Description

The project was already running on both iOS and Android without errors.
I followed the steps of a Youtube tutorial and checked on many different sources, including this repository’s README.md.
One of the steps, for making it run on both systems (Android and iOS), consisted in naming the font files with their fullnames (for example: "GT Walsheim Bold.otf")
Then it worked on iOS, through Xcode Simulator. But it didn't work on Android Studio's Device.
Am I missing some kind of configuration on Android side?

Environment

• MacOS Sonoma 14.0 (Intel i9)
• Android Studio Giraffe | 2022.3.1 Patch 2
  Runtime version: 17.0.6+0-17.0.6b829.9-10027231 x86_64.
  VM: OpenJDK 64-Bit Server VM by JetBrains s.r.o.
• React 18.2.0
• React Native 0.72.6
• Styled Components ^6.1.0
• npx 10.2.0
• react-native-asset ^2.1.1
• react-native-vector-icons ^10.0.1

react-native.config.js

module.exports = {
  assets: ['./assets/fonts/'],
  dependencies: {
    'react-native-vector-icons': {
      platforms: {
        ios: null,
      },
    },
  },
};

link-assets-manifest.json

{
  "migIndex": 1,
  "data": [
    {
      "path": "assets/fonts/GT Walsheim Bold.otf",
      "sha1": "cc9e24e3705080cfc84a5875408670c4c6f6274e"
    },
    {
      "path": "assets/fonts/Inter Bold.otf",
      "sha1": "889ba4eaa4088d73f33cc98ae4ef907b4072c6a5"
    },
    {
      "path": "assets/fonts/Inter Light BETA.otf",
      "sha1": "b888e437c703a2efea8f39ed36512fe964891f53"
    },
    {
      "path": "assets/fonts/Inter Medium.otf",
      "sha1": "ca1fd951ca585d18be345331da8055e027072511"
    },
    {
      "path": "assets/fonts/Inter Regular.otf",
      "sha1": "d32253389158b0e08276b7a4e1401a5e779a1d0f"
    },
    {
      "path": "assets/fonts/Inter Semi Bold.otf",
      "sha1": "3cb26a799cf631657608fd2a2dd60b2502537bde"
    }
  ]
}

Attempts

• Use ttf instead of otf, but I didn't have success (but I may try again, since I didn't delete the otf with the same name).
• Rename all files back to their original names (with dashes instead of spaces)
• Cleaned cache with .gradlew clean (inside android folder)
• Removed Build folders

Observations

Android Studio presents TWO different assets/fonts folders on the same hierarchy: one with my custom fonts, the other with other fonts that I didn't knew I had, but when I select it the top bar says "ReactNativeVectorIcons>fonts" (as shown bellow). Is it possible that they are conflicting?

If there's any other information that you need from my part, please ask away and I'll provide it asap.

If you run the command twice, IDs in pbxproj are changed, even if files didn't change.
It's unecessary and not very handy when you work with git in team.
In my case I have a combination of a generated font (for icons, with a static name) and static pdf, and references changing in xcode proj is totally not necessary.
The fact that my font is generated from svg made me ignore my font file in android assets folder. So I must run the command to generate my font and then do the linking (to have the font at the right place for android). That's why I need to call the link command everytimes (npm postinstall hook & prestart).

Finding a way to avoid this unecessary updates could be nice!

Just better for git diff :)
2 spaces would be nice. Should be easy to do according to the codebase. Are you open for this improvements?

I see you already support linking different files or folders on android vs ios.

However, it'd be really great if the configuration was able to be declared in the react-native.config.js file. That way I don't have to create separate scripts to keep track of which files to link on iOS and android. And other users of my project don't have to learn a new way of linking assets.

I think it'd be very nice to have two optional parameters added to react-native.config.js, called "assets-ios" and "assets-android".

That way when I run npx react-native-asset it would first link the files listed in the assets parameter to both platforms, and then it would separately link assets-ios to the iOS platform and assets-android to Android.

Thanks for this repo by the way!

Given config:

module.exports = {
  assets: ["./assets"]
};

And the following files on disk:

> tree assets/
assets/
└── www
    └── test.html

I had hoped to see the "www" directory preserved in the asset path on-device. What I see instead is:

• Android: an asset path of custom/test.html
• IOS: the file is plopped right into the .app, e.g.: /Library/Developer/CoreSimulator/Devices/28BE7070-4C6C-44C4-BBA4-2E08DDFF77F2/data/Containers/Bundle/Application/1FC5CCB6-981B-4BCA-861B-138B68B6FBE8/Foobar.app/test.html

Is this expected behavior? Is it possible to preserve my www directory on both platforms?

Hi! This seems to now work on version 2.0.0

react-native.config.js:

module.exports = {
  assets: ['./assets/fonts/'],
};

ios/link-assets-manifest.json:

{
  "migIndex": 1,
  "data": [
    {
      "path": "assets/fonts/.DS_Store",
      "sha1": "df2fbeb1400acda0909a32c1cf6bf492f1121e07"
    },
    {
      "path": "assets/fonts/Rubik-Black.ttf",
      "sha1": "ac5408131f3693795f4e9049e78f1d18f1ed19fb"
    },
    {
      "path": "assets/fonts/Rubik-BlackItalic.ttf",
      "sha1": "313caf026d4cc607a0874e97c2c836ab7c296aba"
    },
    {
      "path": "assets/fonts/Rubik-Bold.ttf",
      "sha1": "37d3e9933d7ea3cd1ea9048a929a9392c506538f"
    },
    {
      "path": "assets/fonts/Rubik-BoldItalic.ttf",
      "sha1": "60119c0b523c3b0712e956fa53b99adce01a3c91"
    },
    {
      "path": "assets/fonts/Rubik-Light.ttf",
      "sha1": "ab626c8a0e663e9daf5b5064783e06ebfef9c80b"
    },
    {
      "path": "assets/fonts/Rubik-LightItalic.ttf",
      "sha1": "7e6c1d6a4347713349c49846bb066aaddc825cec"
    },
    {
      "path": "assets/fonts/Rubik-Medium.ttf",
      "sha1": "1c7160fa20ccc42db9a1fc9245cd8f9367a428ea"
    },
    {
      "path": "assets/fonts/Rubik-MediumItalic.ttf",
      "sha1": "61761978e3bfdd077f9799d2e491306ec205c869"
    },
    {
      "path": "assets/fonts/Rubik-Regular.ttf",
      "sha1": "688c0cbc43d63c4f63cb997018fe889915a9dc7b"
    },
    {
      "path": "assets/fonts/Rubik-RegularItalic.ttf",
      "sha1": "2c0bc181562295cba66d1e23da977237324ca5fc"
    }
  ]
}

android/link-assets-manifest.json:

{
  "migIndex": 1,
  "data": [
    {
      "path": "assets/fonts/.DS_Store",
      "sha1": "df2fbeb1400acda0909a32c1cf6bf492f1121e07"
    },
    {
      "path": "assets/fonts/Rubik-Black.ttf",
      "sha1": "ac5408131f3693795f4e9049e78f1d18f1ed19fb"
    },
    {
      "path": "assets/fonts/Rubik-BlackItalic.ttf",
      "sha1": "313caf026d4cc607a0874e97c2c836ab7c296aba"
    },
    {
      "path": "assets/fonts/Rubik-Bold.ttf",
      "sha1": "37d3e9933d7ea3cd1ea9048a929a9392c506538f"
    },
    {
      "path": "assets/fonts/Rubik-BoldItalic.ttf",
      "sha1": "60119c0b523c3b0712e956fa53b99adce01a3c91"
    },
    {
      "path": "assets/fonts/Rubik-Light.ttf",
      "sha1": "ab626c8a0e663e9daf5b5064783e06ebfef9c80b"
    },
    {
      "path": "assets/fonts/Rubik-LightItalic.ttf",
      "sha1": "7e6c1d6a4347713349c49846bb066aaddc825cec"
    },
    {
      "path": "assets/fonts/Rubik-Medium.ttf",
      "sha1": "1c7160fa20ccc42db9a1fc9245cd8f9367a428ea"
    },
    {
      "path": "assets/fonts/Rubik-MediumItalic.ttf",
      "sha1": "61761978e3bfdd077f9799d2e491306ec205c869"
    },
    {
      "path": "assets/fonts/Rubik-Regular.ttf",
      "sha1": "688c0cbc43d63c4f63cb997018fe889915a9dc7b"
    },
    {
      "path": "assets/fonts/Rubik-RegularItalic.ttf",
      "sha1": "2c0bc181562295cba66d1e23da977237324ca5fc"
    }
  ]
}

Symlinks could eliminate file duplication in a project directory.

Also, supporting glob patterns instead of passing huge file lists via command line could help.
https://www.npmjs.com/package/glob

Hey 👋 Thanks for creating this awesome package :)

I store my images on the native side to help with performance. Right now this package works great for iOS, unfortunately Android requires all images to be stores in drawable folder (correct me if I'm wrong) and won't load the asset inside <Image/> tag.

Would it be hard to support it?

Hi. I have an issue.

react-native-asset
module.js:557
    throw err;
    ^

Error: Cannot find module 'react-native/local-cli/link/ios/createGroupWithMessage'
    at Function.Module._resolveFilename (module.js:555:15)
    at Function.Module._load (module.js:482:25)
    at Module.require (module.js:604:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (/Volumes/Datos/hmontes/.config/yarn/global/node_modules/react-native-asset/lib/copy-assets/ios.js:4:32)
    at Module._compile (module.js:660:30)
    at Object.Module._extensions..js (module.js:671:10)
    at Module.load (module.js:573:32)
    at tryModuleLoad (module.js:513:12)
    at Function.Module._load (module.js:505:3)

Can you help me, please?

Thank you

It raises warning:

react-native-asset > [email protected]: Version 1.x or earlier is no longer supported.