I have expo 30 proyect and the fonts ( fontello icons ) load succesful now 3 months later I reopen the proyect before update expo and fonts does´t load even if I create a new proyect the fonts does´t
(I have already changed the import from
import { Font } from 'expo';
to
import * as Font from 'expo-font';)
here's a snack with the problem https://snack.expo.io/#emmalv/bold-banana
it's curious that in expo-cli when I run the same code and print the state of loading first return false and before true and inmediately show red screen saying that font has not been loaded through Font.loadAsync
I've tried wirtting everything in the app class instead of loading the fonts from another file and the behavior is the same
other thing I've tried is like the new documentation says, use expoAssetId
const expoAssetId = require("assets/fonts/custom-icon-font.ttf");
const Icon = createIconSetFromFontello(fontelloConfig, 'FontName', expoAssetId);
but I get another error
C.replace is not a function. (In 'C.replace(/\.(otf|ttf)$/,'')', 'C.replace' is undefined)
Expected Behavior
the icons load and show correctly
Actual behavior
when load throw an exception 'fontFamily "../assets/fonts/sowaicons" is not a system font and has not been loaded through Font.loadAsync.' and show a square instead of the icon
Enviroment
Windows 10
sdkVersion: 35.0.0,
expo: ^35.0.0",
expo-font: ~7.0.0
I created working example:
https://snack.expo.io/#djalik/custom-fonts
change CustomIcon code:
import { createIconSetFromFontello } from '#expo/vector-icons';
import fontelloConfig from '../assets/fonts/config.json';
// const ttf = require("../assets/fonts/sowaicons.ttf");
// import myfont from "../assets/fonts/sowaicons.ttf";
const Icon = createIconSetFromFontello(fontelloConfig, 'sowaicons');
and replace this.state.setState... to this.setState
Related
I tried
import { LinearTextGradient } from "react-native-text-gradient";
but this is not work for text gradient. It gives error. it says "No ViewManager defined for class RNLinearTextGradient"
i need to give gradient to text for ios and android
I have created a font pack from Icomoon tool to be able to use it on my react-native app. Black & White icons seems to load just fine, but colored icons are broken and forced to be black & white while in the app.
I'm doing the following to add it, (I also added it manually on XCode inside Resources folder, it's everything linked there)
import { createIconSetFromIcoMoon } from 'react-native-vector-icons';
import icomoonConfig from './../selection.json';
const Icomoon = createIconSetFromIcoMoon(icomoonConfig, 'icomoon', 'icomoon.ttf');
const icomoon = {
'book': [30],
'book-color': [30],
'find': [30],
'find-color': [30],
'match': [30],
'match-color': [30],
'megaphone': [30],
'megaphone-color': [30]
}
const icomoonLoaded = new Promise((resolve, reject) => {
Promise.all(
Object.keys(icomoon).map(iconName =>
Icomoon.getImageSource(
iconName.replace(replaceSuffixPattern, ''),
icomoon[iconName][0],
icomoon[iconName][1]
)
),
).then(sources => {
Object.keys(icomoon)
.forEach((iconName, idx) => (
iconsMap[iconName] = sources[idx]
));
resolve(true);
});
});
export {
iconsMap,
icomoonLoaded
};
When I imported them in the page, the ones in color are loaded fine, although, it shows a "Multicolor" info next to each icon as if it was wrong to do or I have to handle it differently?
In the docs for vector-icons with icomoon, there's not much information about it.
Anyone has an idea on why this is happening? Thanks.
I'm having the same issue, It seems like your are only able to use a single color per icon when using icomoon + react-native-vector-icons. See this warning from the icomoon download page (press the "(i) Muticolor" text from your screenshot)
Font glyphs cannot have more than one color by default. Using CSS, IcoMoon stacks multiple glyphs on top of each other to implement multicolor glyphs. As a result, these glyphs take more than one character code and cannot have ligatures.
To avoid multicolor glyphs, re-import your SVG after changing all its colors to a single color.
As the message says, css is included to fix this issue but it can't be used in React native.
Your best bet is to either load it as an image or to create multiple icons as layer and in the code combine them on top of each other. Mimicking what the included style.css usally does
You can use the icons you get from Icomoon as SVG with multiple color.
React-Icomoon Repo
React-Icomoon with Multiple Color (Demo)
I have two scenes in my app (react-navigation).
Scene 1: Flat List with an Image per row
Scene 2: Same Image with some more details
If I am navigating from Scene 1 to Scene 2 the component is always loading the Image again.
Why does the Image-component not use the Image from the cache? On other components (without navigating) the Cache is working. Cache-Control is set to max_age=2592000.
If the image(s) are static, you can import and export them from a single file:
export default class Images {
static image1 = require("../public/images/image1.jpg");
static image2 = require("../public/images/image2.jpg");
}
You can use a tool like https://github.com/wcandillon/react-native-static-images to script this for you.
I want to use a custom font in a QML application, and to not have to specify it in every text field, I use a component as suggested in this answer.
I have a DefaultText.qml under a styles prefix in my qml.qrc, which resides in the folder styles.
import QtQuick 2.0
Text {
color: "black"
font.family: myCustomFont.name
font.bold: false
font.italic: false
font.pixelSize: 14
}
I use it, among other places, in a qml named PanelRight.qml, under the prefix Panels in the folder widgets. It's all under the same qml.qrc.
import "qrc:/styles/styles"
Item
{
// ...
DefaultText { text: "xyz" }
}
Interestingly, DefaultText is underlined as an error, with the message "Unknown component. (M300)". However, I can successfully compile and run my application, and the custom font is displayed correctly. However, it's annoying that I have a long list of errors (I intend to use it in a lot of places) and that autocomplete doesn't work.
I searched the Qt forums, this problem was mentioned there in case of custom plugins, which I don't use.
Add relative path of DefaultText.qml in PanelRight.qml file as
import "../styles"
import QtQuick.Controls.Material
I'm using the library react-native-parallax-view and I keep on getting this error. Even the example doesn't work. What is causing this?
2015-11-30 14:26:59.836 [error][tid:main] Unable to resolve module Dimensions from /Users/hiran/research/react-native/myapp/node_modules/react-native-parallax-view/lib/ParallaxView.js: Invalid directory /Users/node_modules/Dimensions
Thanks.
Found the fix. In your project directory node_modules/react-native-parallax-view/lib/ you will find the ParallaxView.js file. Update the lines as follows.
var screen = require('Dimensions').get('window');
Replace this with
var screen = Dimensions.get('window');
and add Dimensions to the import list as,
var {
StyleSheet,
View,
ScrollView,
Animated,
Dimensions,
} = React;
Hope the author would update this soon.