oblador/react-native-vector-icons

react-native-paper

bnbon opened this issue · 5 comments

bnbon commented

Hi,

I am using the monorepo version, and yarn throws a warning that it needs react-native-vector-icons, when now I am using

"@react-native-vector-icons/common": "0.0.1-alpha.11",
"@react-native-vector-icons/material-design-icons": "^7.4.47-alpha.15",

Also, I am using the monorepo and after updating some other libraries, all the icons I am using show a box and a ?, any tips on how to debug this? I am running in circles!

Ever so sorry.

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

I have that in my react-native.config.js, because I bundle in Roboto etc, is that perhaps the issue? Perhaps the guide could include a mention of what to do for people who do have fonts other than icon files they need to use?

I did try the codemon too, and got this;

native-vector-icons/codemod/lib/commonjs/index.js:40:26)
    at ChildProcess.emit (node:events:517:28)
    at ChildProcess._handle.onexit (node:internal/child_process:292:12) {
  errno: -63,
  syscall: 'open',
  code: 'ENAMETOOLONG',
  path: 'ios/xxxxxxx/Info.plist\n' +
johnf commented

@bnbon Can you try upgrading to common version @react-native-vector-icons/common version 0.0.1-alpha.20 there have been lots of bugfixes since .11

The assets piece is fine for other fonts, or you could put them in an rnvi-fonts directory and they'll also be copied.

ningmengchongshui commented

@bnbon Can you try upgrading to common version @react-native-vector-icons/common version 0.0.1-alpha.20 there have been lots of bugfixes since .11

The assets piece is fine for other fonts, or you could put them in an rnvi-fonts directory and they'll also be copied.

I am unable to use it on iOS and Android.
Display as a square on Android and a question mark icon on iOS.
Previously, using 'react native': '0.74.1' was normal on Android.
But in iOS, I have to add ios/Fonts/*. ttf
I'm not sure if that's the issue.
Because my newly built 'react native': '0.75.3' environment cannot display properly.

{
  "dependencies": {
    "react": "18.3.1",
    "react-native": "0.75.3"
  },
  "devDependencies": {
    "@react-native-vector-icons/ant-design": "^4.4.2-alpha.25",
    "@react-native-vector-icons/common": "^0.0.1-alpha.20",
    "@react-native-vector-icons/fontawesome": "^4.7.0-alpha.25",
    "@react-native-vector-icons/ionicons": "^7.4.0-alpha.27",
    "@react-native-vector-icons/material-design-icons": "^7.4.47-alpha.25"
 }
}
johnf commented

@ningmengchongshui, I suspect this is because you have added these as devDependencies.
@react-native-vector-icons/common in particular needs to be a dependency so that the native code is compiled

ningmengchongshui commented

@ningmengchongshui，我怀疑这是因为你已将它们添加为 devDependencies。 @react-native-vector-icons/common特别是需要依赖项，以便编译本机代码

thanks!

They exist in dependencies. I should have copied the wrong information when submitting. After submitting the issue, my project did not continue development.

I moved the project to a new folder and re executed yarn, discovering some key information that had not been printed before. So the problem was strangely solved.

> Task :react-native-vector-icons_common:copyFonts
Copying font /Users/app/node_modules/@react-native-vector-icons/ant-design/fonts/AntDesign.ttf
Copying font /Users/app/node_modules/@react-native-vector-icons/fontawesome/fonts/FontAwesome.ttf
Copying font /Users/app/node_modules/@react-native-vector-icons/ionicons/fonts/Ionicons.ttf
Copying font /Users/app/node_modules/@react-native-vector-icons/material-design-icons/fonts/MaterialDesignIcons.ttf
johnf commented

Good to know it's working now. Thanks