React-native-vector-icons: Can't install FontAwesome Pro

[bramvbilsen]

I'm am trying to install FontAwesome Pro with the automated script like the docs suggest:
./node_modules/.bin/fa5-upgrade
I am unfortunately getting the following error running that:

Downloading FontAwesome5 Pro
tar: Option -f requires an argument
Usage:
  List:    tar -tf <archive-filename>
  Extract: tar -xf <archive-filename>
  Create:  tar -cf <archive-filename> [filenames...]
  Help:    tar --help
mv: rename package to pro: No such file or directory
~/Documents/codebase
Copying font files
cp: /var/folders/rg/r5v4smgx1vz7dkf27bs6_k7w0000gr/T/rnvi.QLLtsHqM/pro/webfonts/fa-brands-400.ttf: No such file or directory
cp: /var/folders/rg/r5v4smgx1vz7dkf27bs6_k7w0000gr/T/rnvi.QLLtsHqM/pro/webfonts/fa-light-300.ttf: No such file or directory
cp: /var/folders/rg/r5v4smgx1vz7dkf27bs6_k7w0000gr/T/rnvi.QLLtsHqM/pro/webfonts/fa-regular-400.ttf: No such file or directory
cp: /var/folders/rg/r5v4smgx1vz7dkf27bs6_k7w0000gr/T/rnvi.QLLtsHqM/pro/webfonts/fa-solid-900.ttf: No such file or directory
Modifying package.json
internal/modules/cjs/loader.js:583
    throw err;
    ^

Error: Cannot find module '../../package.json'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:581:15)
    at Function.Module._load (internal/modules/cjs/loader.js:507:25)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at require (internal/modules/cjs/helpers.js:20:18)
    at Object.<anonymous> (/Users/bram/Documents/codebase/node_modules/react-native-vector-icons/bin/add-font-assets.js:6:14)
    at Module._compile (internal/modules/cjs/loader.js:689:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
    at Module.load (internal/modules/cjs/loader.js:599:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
    at Function.Module._load (internal/modules/cjs/loader.js:530:3)
Linking project
Scanning folders for symlinks in /Users/bram/Documents/codebase/node_modules (25ms)
rnpm-install info Platform 'ios' module react-native-vector-icons is already linked 
rnpm-install info Platform 'android' module react-native-vector-icons is already linked 
rnpm-install info Linking assets to ios project 
rnpm-install info Linking assets to android project 
rnpm-install info Assets have been successfully linked to your project 
Done

Our project structure is not typical so perhaps that is the problem. Any way that we can fix this?

[hampustagerud]

This script is not really error checking but I think the error is when downloading the npm package.

cp: /var/folders/rg/r5v4smgx1vz7dkf27bs6_k7w0000gr/T/rnvi.QLLtsHqM/pro/webfonts/fa-brands-400.ttf: No such file or directory

The bolded part here is the temporary folder created for storing the package, could you check (after running this script) if the files are downloaded at all?

Note: The folder path changes every time you run the script so you will have to look in the terminal output to find the new path. I don't think the script removes it though so you should not have to modify it.

Also: what system are you on? I'm guessing macOS from reading this output. I also think you are using the npm version 5.0.0? You should use the git repo for now, change this in your package.json:

"react-native-vector-icons": "^5.0.0" (or something similar)
to
"react-native-vector-icons":"oblador/react-native-vector-icons"

It has a fix for this script as well related to not finding package.json

Our project structure is not typical so perhaps that is the problem.

Don't know what this means? Not an issue right now according to your terminal output.

Any way that we can fix this?

You could just download the fonts from the website and then install them manually. The standalone version of the script would be:

#!/bin/sh

echo "Setting up npm config"

if [ $(npm config get @fortawesome:registry) = "undefined" ]
then
  npm config set "@fortawesome:registry" https://npm.fontawesome.com/
fi

echo "Please enter your FontAwesome5 npm token:"
read fa5_token
npm config set "//npm.fontawesome.com/:_authToken" ${fa5_token}

echo "Creating temporary folder"

TEMP_DIR=$(mktemp -d -t rnvi)
echo "Created folder $TEMP_DIR"
pushd ${TEMP_DIR}

echo "Downloading FontAwesome5 Pro"

ARCHIVE=$(npm pack @fortawesome/fontawesome-pro --silent)
tar -xzf ${ARCHIVE}
mv package pro

popd

echo "Copying font files"

cp ${TEMP_DIR}/pro/webfonts/fa-brands-400.ttf FontAwesome5_Pro_Brands.ttf
cp ${TEMP_DIR}/pro/webfonts/fa-light-300.ttf FontAwesome5_Pro_Light.ttf
cp ${TEMP_DIR}/pro/webfonts/fa-regular-400.ttf FontAwesome5_Pro_Regular.ttf
cp ${TEMP_DIR}/pro/webfonts/fa-solid-900.ttf FontAwesome5_Pro_Solid.ttf

echo "Done"

Run it from the folder where you want to store the fonts, then you have to link them manually.

I really think we should find out the cause of the issue though but it's a temporary solution to get you started 🙂

[bramvbilsen]

@hampustagerud Changing the version in my package.json file did the trick!
So in package.json use

"react-native-vector-icons":"oblador/react-native-vector-icons"

[hampustagerud]

Great! You can use npm/yarn again when the next version is released 🙂

[cristianst]

@hampustagerud Thanks for fixing it in within the next npm release. Do you have an ETA? I am also using the work around for now. Thanks in advance.

[hampustagerud]

Sorry, I only try to maintain the FA5 module to the best of my ability 🙂 I have no control over when new npm releases are being made, it is up to @oblador. There has been some commits and updates since the 5.0.0 release which could warrant a new release but I don't know how much changes there should be between releases. There is an issue with the iOS version of the FA5 implementation as well and I would like to fix it properly before a release but it has proven to be harder than I thought so we'll see 🙂