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
Related
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
I added custom font in my CLI app by configuring it in react-native.config.js
Now i want to display Apploading splash screen till my font and other required assets loaded on screen and app is ready to use.
Adding Fonts
If you are using react-native-cli you dont need to use AppLoading component to add your fonts, you just have to follow these simple steps for React Native Version > 0.60:
STEP 1: Add Fonts to Assets
Add the fonts you want to use to your project in src/assets/fonts for example.
STEP 2: Define assets directory (Which you already did i guess)
Create file react-native.config.js in your root project directory and add following code
module.exports = {
assets: ["./src/assets/fonts/"],
};
STEP 3: Link assets using react-native link
Run in terminal in your root project directory
$ npx react-native link
NOTE:
link command will link fonts in Info.plst for IOS, and creates fonts directory android/app/src/main/assets/fonts for Android, where copies of your custom fonts will be stored.
Splash screen
You can simply achieve that by configuring your root navigator e.g. StackNavigator to show a normal screen component that returns some sort of a loading indicator as the first screen to be rendered when your app first starts.
Then in that component, use useEffect to do some background tasks that need to be done before your app starts.
Finally, when the awaited tasks are done, simply navigate to your main app flow e.g. HomeScreen.js using the navigation.navigate() method.
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 .
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>
I am creating an application using react native expo cli, my application contains a lot of data which is in the text file.
So now i need to load the text file into my application. how can i do that?
After dig down a lot regarding this issue i manage to answer my own question.
To read text file in react-native we have to create bare react-native project.
Read this link about manage and bare project for react-native : expo-managed-vs-bare.
After eject expo project or creating bare react-native project you can use library react-native-fs, which have ability to read text file and display in Text component.
For Android,
Create an assets Folder inside your-project-file\android\app\src\main
To read this folder assets use this snippet,
import * as RNFS from 'react-native-fs';
RNFS.readFileAssets(path to your file inside assets folder).then(result => {
console.log(result);
}).catch(err => {
console.log(err);
});
This will help to read text file inside your project for android only.
As #james Liu,the simplest way is to organize your data as json an load it like this:
const data = require("./mydata.json");
By doing this you get an JS object you can easily handle in your code