Custom font icons are showing cross in box in react-native - react-native

I am trying to use Custom fonts in react native. Converted SVG's in custom icon set using Icomoon and tried all the steps from https://www.reactnative.guide/12-svg-icons-using-react-native-vector-icons/12.1-creating-custom-iconset.html.
react-native-vector-icons was installed already.
used react-native link react-native-vector-icons to setup the vector icons framework for the project.
Placed the selection.json and Icomoon.ttf files in assets/fonts folder.
And added "rnpm": { "assets": [ "resources/fonts" ] } in package.json file
Created CustomIcon.js file and added
import {createIconSetFromIcoMoon} from 'react-native-vector-icons';
import icoMoonConfig from './selection.json';
export default createIconSetFromIcoMoon(icoMoonConfig);
In App.js file added following
import CustomIcon from './components/CustomIcon.js'
<CustomIcon name='accounts' size={50} /> //To use the icon
And the Icon is showing ☒ at the icon place.
If anyone have solution please share,
Thank you.

In Android platform icon showed me like this:
after some time of troubleshouting I finally find out solution.
Beacouse of I use my own icon set I created iconSet.ttf from iconSet.svg by IcoMoon App.
In fact I followed this tutorial: https://medium.com/bam-tech/add-custom-icons-to-your-react-native-application-f039c244386c
IcoMoon App created *.ttf and selection.json and problem was in selection.json.
I renamed *.ttf file to myIcons.ttf but I had to change fontFamily and name in the end of file selection.json to same name like I named *.ttf file. In my case myIcons.ttf I renamed name and fontFamily to myIcons in selection.json

I've tried a lot but didn't get solution but finally I got the solution
whenever I used react-native link react-native-vector-icons command it didn't worked properly. So I checked font folder in android/app/src/main/assets/font and I found that my icomoon font file wasn't present there. So I copied the file and manually pasted at the location and it worked .

Related

Expo/React Native: Can't find image file after ejecting to bare workflow

I have an Expo project with an <Image /> component sourced from an import:
import logoImage from './assets/logo-medium.png';
...
<Image source={logoImage} />
This works fine on my device when building with expo run:ios -d. However, when I build the project with XCode, the image isn't there, and I see this error:
[native] Could not find image file:///Users/username/Library/Developer/CoreSimulator/Devices/B76D59AF-9599-4174-991B-AE484575B79C/data/Containers/Data/Application/A57C6E10-3DF9-46E0-8B56-7760AF5199C6/Library/Application%20Support/.expo-internal/assets/assets/logo-medium.png
When I try to find that file manually, there is no ...Application Support/.expo-internal directory.
Is there a different way I should be specifying image location? Or a way for the image to be correctly bundled when building from XCode?
I had the same issue, make sure about two things:
One of the potential solutions found on the web -
https://forums.expo.dev/t/assets-missing-only-in-ios-release-build-after-ejecting/42759
Ok I found out the problem.
When ejecting, expo is supposed to generate a metro.config.js file that looks like that:
module.exports = {
transformer: {
assetPlugins: ['expo-asset/tools/hashAssetFiles']
}
};
Your metro.config.js file shuld has .js extensions not .ts

Showing SVG image with 'react-native-svg' library, however encounter 'Unrecognized font family' error in iOS (Android works fine.)

My react-native version is "0.62.2".
In order to show remote SVG images, I use react-native-svg library in my React Native project.
I use it like:
import {SvgUri} from 'react-native-svg';
const MyScreen = ({route, navigation}) => {
...
...
return (<View>
<SvgUri width="100%" height="100%" uri={imageSource} />
</View>)
}
export default MyScreen;
In Android emulator, it works fine!
In iOS, it works in a sense, but the way how it works is: when navigate to MyScreen, I always encounter the following error at runtime in the 1st place:
Then, I have to press on keyboard ctrl+S to save code again (though nothing needs to save) which triggers the simulator to refresh, then MyScreen is shown successfully with the SVG image.
Why I get the "Unrecognized font family 'Univers-Condensed'" error at runtime in iOS? How to get rid of it?
(In my code, I have no code using that font, so my guess is the library introduced that font.)
This happens when your app is trying to access the given font family and that specific font is not linked with your project and this error can happen only be on a single platform (Android, IOS) because these fonts linked separately on both platforms.
Solution:
Remove usage of Univers-Condensed font family in your JS code because JS code is the trigger point of this error.
Note: This solution will not work if this error is produced by some library that you are using in your project and that is using that Univers-Condensed font family.
Another solution is, You have to add and link this font family in your project.
Download the font .ttf file
Make a folder named assets and inside the assets, folder make the fonts
folder on the root of the project and put your downloaded font file in it.
add this to your react-native.config.js file
module.exports = {
assets: ['./assets/fonts/']
};
run react-native link
this process will automatically link fonts with your IOS and android project too.
Can you try this add Universe-Condensed.ttf in info.plist
<key>UIAppFonts</key>
<array>
<string>Universe-Condensed.ttf</string>
</array>

Importing custom icons into React Native 0.62

I'm trying to import and use my own custom icons in my React Native 0.62.2 app.
I followed the steps outlined here https://github.com/oblador/react-native-vector-icons#custom-fonts but so far the icons are not showing up.
Here are the steps I followed:
Created my icon set and converted it to fonts on https://icomoon.io
Downloaded the zip file from IcoMoon and placed the ttf file into ./src/assets/fonts folder
I then created react-native-config.js file and placed in the root. The code in this file is down below
Under my components folder, I created CustomIcon.js -- see code below
I also placed the selection.json file that was included in the zip file I downloaded from IcoMoon in the same folder as CustomIcon.js
I then used the CustomIcon as shown below
So here what the codes look like:
The react-native-config.js file looks like this:
module.exports = {
project: {
ios: {},
android: {},
},
assets: ['./src/assets/fonts/']
};
The CustomIcon.js file looks like this:
import { createIconSetFromIcoMoon } from 'react-native-vector-icons';
import icoMoonConfig from './selection.json';
export default createIconSetFromIcoMoon(icoMoonConfig, 'StreamLine', '../../../assets/fonts/streamline-icon-set-1.ttf');
And here's how I use the icon:
import CustomIcon from '../common_components/fonts/CustomIcon';
<CustomIcon name="home-outline" />
When I run the app in Android Emulator, I see the missing icon symbol i.e. a box with an X in it.
Any idea what the issue is here?
There is a really good article which helped me with this problem.
Custom icon fonts with React Native
There is always issue with custom icons. When I personally bump into such condition I do these:
Rename the react-native-config.js to react-native.config.js
Re-run the app by restarting metro
Make sure I have correct path to my assets in react-native.config.js
react-native link and restart. It copies your assets to corresponding ios and android folders
If neither do not help I copy the assets manually to folder: Project/android/app/src/main/assets/fonts

Why is react-native-svg-icons giving me the error that there are some duplicates for ttf files?

Long story short
I have sunk about 12 hours in my iPhone react-native app. Since yesterday it's not building anymore (out of nowhere). After 5 hours! of debugging I found what may caused the issue but not how to solve it.
I use these packages containing .ttf files / for icons and stuff:
"#fortawesome/fontawesome-svg-core"
"#fortawesome/free-solid-svg-icons"
"#fortawesome/react-native-fontawesome"
"#react-native-community/cli-platform-ios"
"react-native-vector-icons"
And I think there is the problem. Since react-native-vector-icons seems to use also the same .ttf file that one of these packages bring in I get the error:
Multiple Commands produce...
So when I uninstall react-native-vector-icons it works again. But then when I get to the screen where i use this package:
"react-native-elements" (which in the docs it says it needs react-native-vector-icons)
It's complaining that it can't find Fontawesome Icons (the Checkbox Component from elements)
So how can I fix this? I need the app to build obviously and also need the Checkbox Component from react-native-elements. But react-native-elements requires react-native-svg-icons. But when I install it it doesn't even build with the above error that there are multiple .ttf files of the same icon.
I could not figure it out but it has something to do with react-native-elements since they also link the icons that also come with react-native-vector-icons
I solved it by getting rid of react-native-elements and created my own custom Checkbox component.
I had a similar issue associated with the fonts included in the react-native-vector-icons library. I solved it with the following.
I created assets/fonts dir in my project. I added another some fonts that iOS didn't have linked ("Nunito" font in my case), but I didn't include fonts of react-native-vector-icons
I created a new file named react-native.config.js in the root of my project with the following:
module.exports = {
project: {
ios: {},
android: {}
},
assets: ['./src/assets/fonts/'],
};
Then I ran react-native link
Then I went to ios dir (cd ios) and ran pod update
Finally, I ran react-native run-ios and the magic happened
I bassed it on Alex Biddle's post: https://medium.com/better-programming/how-to-add-custom-fonts-to-your-react-native-project-c64305281b9

font-awesome in vue project is not working

I need to use font-awesome in my vue project to show some icon.
First, I installed font-awesome in my project.
npm install font-awesome --dev-save
After installed, it didn't work, just displayed as a square instead icon.
The error reason is the font file for font-awesome can't be loaded successfully.
After investigation, I copied these font file to a new folder, and reset the variable $fa-font-path's value, like below:
// reset font-awesome variables
$fa-font-path: '/src/common/fonts'
And it works well. Hope could help.
You should be able to use the fonts just by including
import 'font-awesome/css/font-awesome.min.css
in main.js.