I have used one custom font in the react native application. And everything is working fine accept when the users go to the phone settings and change the font size. Then in the application the UI looks pretty ugly. I have used StyleSheet.create method to create all the styles in the app and also have given definite font sizes for the texts. But even though when the phone settings font size is changed, my app font size also changes.
Is there a way to restrict any changes in the app's font size, irrespective of what users may do in the phone settings?
Or you can add this in your main app index.js file
// Override Text scaling
if (Text.defaultProps) {
Text.defaultProps.allowFontScaling = false;
} else {
Text.defaultProps = {};
Text.defaultProps.allowFontScaling = false;
}
// Override Text scaling in input fields
if (TextInput.defaultProps) {
TextInput.defaultProps.allowFontScaling = false;
} else {
TextInput.defaultProps = {};
TextInput.defaultProps.allowFontScaling = false;
}
You can stop the scaling with this prop allowFontScaling={false} in your Text component.
Ref - https://reactnative.dev/docs/text#allowfontscaling
I was able to solve this problem using the following code in every page
constructor() {
super();
if (Text.defaultProps == null) Text.defaultProps = {};
Text.defaultProps.allowFontScaling = false;
}
Hope it can help others as well.
For projects using functional components and hook,
Add below line in useEffect of App.js file
if (Text.defaultProps == null) Text.defaultProps = {};
Text.defaultProps.allowFontScaling = false;
Related
I'm trying to display a large number of images using leaflet and I'm having problems making the tileLayers display properly.
I'm extending the TileLayer class and overriding the createTile function like this:
`
let imageLayer = TileLayer.extend({
createTile: function (coords, done) {
const image = window.L.DomUtil.create("img");
image.src = `http://placekitten.com/g/200/300`;
image.crossOrigin = "";
image.onload = function () {
this.onload = function () {};
done(null, image);
};
return image;
}
});
Result
I want to change the position of the images and to only display them in areas I have already defined (for example between offsetting the image at 0,0 to be at 1,1 or using latLng
([8273.300000000001, 10618.02] , [9232.653535353536, 9658.666464646465])).
Ive tried a bunch of different methods and almost always came back to bounds, which don't work and setting the bounds doesn't change anything.
I don't want to use ImageOverlays because the images I'm trying to display are sliced and named with the leaflet naming scheme (0_0_1.png).
I want to disable font scalling for the entire application at once, I disabled it setting useFontScalling to false in but I don't want to do it in this way, please let me know how can I disable it at once, no need to write useFontScalling for each and every file.
For removing font-scaling in whole App paste this code in App.tsx | App.js
If you are using TS:-
interface TextWithDefaultProps extends Text {
defaultProps?: { allowFontScaling?: boolean };
}
((Text as unknown) as TextWithDefaultProps).defaultProps =
((Text as unknown) as TextWithDefaultProps).defaultProps || {};
((Text as unknown) as TextWithDefaultProps).defaultProps!.allowFontScaling = false;
If you are using JS:-
Text.defaultProps = Text.defaultProps || {};
Text.defaultProps.allowFontScaling = false;
Is it possible to use MarkdownString/MarkupContent with code or pre with span to emulate semantic tokens in Hover? If so, is it possible to access the colors from the user's theme using only the CSS on the span elements? Ideally I would like to avoid using anything VSCode specific.
I saw https://github.com/microsoft/vscode/issues/97409 but there was no solution.
If you want to manually set colors for code you can try this:
// using your fileSelector
let disposable = vscode.languages.registerHoverProvider('plaintext', {
provideHover(document, position) {
const codeBlock = `<code><span style="color:#f00;background-color:#fff;">const</span> a = 12</code>`;
const markdown = new vscode.MarkdownString();
// markdown.appendCodeblock(codeBlock, "javascript");
markdown.appendMarkdown(codeBlock);
markdown.supportHtml = true;
markdown.isTrusted = true;
return new vscode.Hover(markdown, new vscode.Range(position, position));
}
});
<pre> also works, instead of <code>, but I think <code> looks better.
How would I adapt #ghettovoice JSFiddle that saves a map to PDF to save the map to a JPEG or PNG? I have no idea how to attempt this problem so ideally if you know hoe to do it you can explain the logic behind it.
exportMap: function () {
var map = this.$refs.map
map.once('rendercomplete', function () {
var mapCanvas = document.createElement('canvas');
var size = map.getSize();
mapCanvas.width = size[0];
mapCanvas.height = size[1];
var mapContext = mapCanvas.getContext('2d');
Array.prototype.forEach.call(
document.querySelectorAll('.ol-layer canvas'),
function (canvas) {
if (canvas.width > 0) {
var opacity = canvas.parentNode.style.opacity;
mapContext.globalAlpha = opacity === '' ? 1 : Number(opacity);
var transform = canvas.style.transform;
// Get the transform parameters from the style's transform matrix
var matrix = transform
.match(/^matrix\(([^(]*)\)$/)[1]
.split(',')
.map(Number);
// Apply the transform to the export map context
CanvasRenderingContext2D.prototype.setTransform.apply(
mapContext,
matrix
);
mapContext.drawImage(canvas, 0, 0);
}
}
);
if (navigator.msSaveBlob) {
// link download attribuute does not work on MS browsers
navigator.msSaveBlob(mapCanvas.msToBlob(), 'map.png');
} else {
var link = document.getElementById('image-download');
link.href = mapCanvas.toDataURL();
link.click();
}
});
map.renderSync();
}
The problem was a combination of missing dependencies (namely FileSaver.js and fakerator.js) and a cross origin server block (CORS block) (Browsers automatically prevent httpRequests to a different domain name unless the server allows it). The first one is fixed by installing the packages while the second one is resolved by setting the crossOrigin Attribute of the ImageWMSLayer to null in my case but possibly to 'Anonymous' for other sources. Hope this helped someone else :)
I'm using react-native-i18n in my project. After changing language to Arabic all text data are automatically aligned to the Right side of the screen properly. But all other components like Icons are aligning only after re-opening the app.
export function langSet(type){
if(type == "en"){
I18n.locale = type;
const currentLocale = I18n.currentLocale();
}else{
I18n.locale = type;
const currentLocale = I18n.currentLocale();
ReactNative.I18nManager.allowRTL(true);
ReactNative.I18nManager.forceRTL(true);
}
}
the language occurs only if u refresh your DOM, for this you should have to make a change state that will make the DOM to refresh,
make a dumy state
state = {
languageChange : false
}
then after shifting language just below that run the state change as
this.setState({ languageChange: !this.state.languageChange ) }