Just realized when I do the following code:
const styles = StyleSheet.create({style: someobj})
styles doesn't actually contain that obj, but an int id that I believe references to the stylesheet.
console.log(styles) // outputs {style: #}
Is there a way for me to dynamically retrieve the style obj after creating it?
You can use StyleSheet.flatten method.See StyleSheet doc
StyleSheet.flatten(styles.stylId)
buddy upstair is right, but not specific enough, I cant add a comment, so post an answer.
you should use flatten, like this:
var someobj = {backgroundColor: 'red', fontSize: 12};
const styletest = StyleSheet.flatten({style: someobj});
console.log(styletest);
Related
I have a situation in which I want to display data in a FluentUI DetailsList, where column names can be very long, while the column content can be very narrow. In such a case, the header will be truncated.
See this codepen.
Is there any way to change this behavior, such that the header text wraps over multiple lines?
While I found this unanswered question from 2 years ago, I couldn't find an answer on the topic on neither Stackoverflow, Github or the offical documentation.
Here are some approaches I tried:
inject a CSS class with word-break: break-all; via the headerClassName field of IColumn
setting isMultiLine on the columns
The DetailsHeader component itself whose rendering I can override with onRenderDetailsHeader does not seem to offer any props for customizing how the text is displayed
Is there even a way to achieve the desired behaviour (wrapping over multiple lines instead of truncating long column headers)?
Most of FluentUI Components uses text-overflow: ellipsis. What you can do is to modify that "rule". Inside DetailsList you have onRenderDetailsHeader method which allows you to change header styles.
const onRenderDetailsHeader = (headerProps, defaultRender) => {
if (!headerProps || !defaultRender) {
//technically these may be undefined...
return null;
}
return defaultRender({
...headerProps,
styles: {
root: {
selectors: {
'.ms-DetailsHeader-cell': {
whiteSpace: 'normal',
textOverflow: 'clip',
lineHeight: 'normal',
},
'.ms-DetailsHeader-cellTitle': {
height: '100%',
alignItems: 'center',
},
},
},
},
})
}
<DetailsList
...
onRenderDetailsHeader={onRenderDetailsHeader}
/>
Codepen working solution
Note:
Play around with minWidth, maxWidth props inside this._columns to get expected behavior.
I currently use (tried some others) for an project HTMLView (https://github.com/jsdf/react-native-htmlview) but its adds to much space between every element.
I just basicly need to render two types of tags P and H3 from a string. I also tried in my style to set margin and padding to 0 - but it hasnt any effect.
Any code suggestions? Or an easy function to run through the item.teaser and replace every P and H3 to a TEXT-Element with a specific class?
<HTMLView addLineBreaks={false} value={item.teaser} stylesheet={htmlStyles.teaser} />
You can try this:
value={"<div>"+item.teaser+"</div>"}
As seen here:
https://github.com/jsdf/react-native-htmlview/issues/202
Cheers :-)
This works const regex = /<br|\n|\r\s*\\?>/g; and then use replace data with regex
Example :
<HTMLView
value={symptom.text.trim().replace(regex, '')}
stylesheet={webViewStyle}
/>
Styles
const webViewStyle = StyleSheet.create({
font: {
color: '#7ab900',
},
});
I think the main issue will be the data which your passing to value param in HTMLView. There might be multiple tags in between and which are wrapped with parent tag. This library expects valid HTML, which means everything should be wrapped in a single top level tag. So wrap the value using main tag / parent tag.
Example: value={"<div>"+item+"</div>"}
This is the other method I found.
use variable which stores regex const regex = /<br|\n|\r\s*\\?>/g;
Then use this regex in replace function
<HTMLView
value={`<div>${symptom.text.trim().replace(regex, '')}</div>`}
stylesheet={webViewStyle}
/>
I have a .js file which holds global data (actually i am going to fill it from website). Here it is:
const DynGlobals = {
HomePageColor: {
color: '#e74c3c'
}
}
/*
or i can set it like this
HomePageColor: '#e74c3c'
/*
export { DynGlobals }
I have a view and trying to set it's style from this file. So far i have tried many things to create another const and set it to view's style but didn't work
const bgColorStyle = {
backgroundColor: {DynGlobals.HomePageColor.color}
}
with or without bracelets it doesn't work. Any advices on this?
I am trying to generate QR code, by using this module 'react-native-qrcode', Here I got generated QR code like this, How can I save this QR code.
Can anyone give me suggestions that how to save this generated qr,any help much appreciated
The library you use uses a webview, therefore you have no image you may save. To save the QR code in a conceptional fashion you may store the value provided and put it into the component as you would like to display it. If you need to get the image, you would need to extend the webview javascript part to use the ImageData interface of the canvas. This is IMHO quite tricky and I am not entirely sure if it is even possible to get data back from the web view.
Use rn-qr-generator to generate a QR code. It will return a path or base64 of generated Image. Later you can use CameraRoll module to store the image in CameraRoll (or Gallery on android).
import RNQRGenerator from 'rn-qr-generator';
import CameraRoll from "#react-native-community/cameraroll";
RNQRGenerator.generate({
value: 'your_qr_string_value_here',
height: 100, // height of the output image
width: 100, // width of the output image
base64: false, // default 'false'
backgroundColor: 'black', // default 'white'
color: 'white', // default 'black'
})
.then(response => {
const { uri, width, height, base64 } = response;
this.setState({ imageUri: uri });
CameraRoll.save(uri);
})
.catch(error => console.log('Cannot create QR code', error));
Before calling CameraRoll.save make sure you have permission to save the image. Permission example see here.
When using lesscon the commandline, I can pass the option --modify-var="my-var=my-val".
How can I pass the same option when I use less programmatically via API with less.render(lessInput, options)?
I would somehow hope that I can set a property in options like {modifyVar:'my-var=my-val'}. But this seems not to work and I didn't find any documentation regarding this use case.
Thanks for any help.
Unfortunately the options are not described at the API documentation. The easiest way to understanding them, will be by studying the the source of https://github.com/less/less.js/blob/master/bin/lessc.
Both the options and modifyVars option should be an object. For the modifyVars option each variable should be a key of the object. Keys may but don't have to start with a #.
Example:
var less = require('less/lib/less-node');
var options = {};
options['modifyVars'] = {'color1' : 'blue', '#color2': 'darkblue'};
less.render('#color1: red; #color2:yellow; t {color1: #color1; color2: #color2;}', options)
.then(function(output) {
// output.css = string of css
// output.map = undefined
console.log(output.css);
});
The above should output as follows:
t {
color1: blue;
color2: darkblue;
}