I currently have a modal where the user can pick from a large flatlist of icons. All have size: '45' and color: 'white'. When a user selects an icon, the modal is closed and their selected icon appears on the card (this feature is one that allows the user to create a custom card).
I then have a feature that allows the user to change the line colour from white to black and visa versa on the card to contrast with their selected background colour. I would also like the colour of the icon to change with the lines, but I cannot find a solution! The icon object itself is read-only and using a StyleSheet seems to only apply styles when it is referenced within the original call like:
<FontAwesomeIcon icon={archive} style = {styles.text} />
I can't seem to wrap it in a styled view and then change the style from there.
Any ideas on how to alter the colour? And the size while I'm asking?
You can make state like this :
const [style,setStyle]=useState()
You change state with user color, and apply it to your FontAwesome icon
<FontAwesomeIcon icon={archive} style = {style} />
Thanks for the answers! I ended up creating a library to reference and just passed the library prefix (fab, far, fas) and the icon name (coffee, archive, wifi). Then used:
<FontAwesomeIcon icon={[icon.props.icon[0], icon.props.icon[1]]} style ={blabla} size = {blabla} />
Meaning I can now manipulate the size and colour wherever I want! Very handy.
Related
I want to create a textfield using react mui textfield. But when I add the multiline prop it gives two boxes with border. how to remove the inner box margin
I tried several css and styling options but didn't work
The issue you're encountering is likely due to the default styling of the TextField component in Material-UI.
One solution to remove the inner margin of the TextField is to use the sx prop to override the default styles.
Documentation on how to use sx prop: https://mui.com/system/getting-started/the-sx-prop/
Example below:
<TextField
multiline
sx={{ p: 0, m: 0 }}
/>
Well, i'm importing a header component where I build my title, subtitle, and top buttons.
I want to import the title, but with a small change on its style, just changing the color to yellow.
How could I change just the color style of title, without touching the other props, or making a new prop in the component?
https://i.stack.imgur.com/oCDpR.png
PS: My first post, I don't know how to paste the img pretty well.
this is the code:
<SimpleHeader
style={styles.header}
title='¡Hola Celia!' /* Yellow color*/
subtitle='¿Qué te lavamos hoy?'
/>
I'm not gonna be able to be exact unless you share the SimpleHeader component but this logic should work for you:
In the SimpleHeader component, add a prop called titleColor and pass it to the text:
<Text title style={[styles.title, {color:props.titleColor}]}>{title}
Pass that extra titleColor prop from the main component:
<SimpleHeader
style={styles.header}
title='¡Hola Celia!' /* Yellow color*/
subtitle='¿Qué te lavamos hoy?'
titleColor='yellow'
/>
as the doc says: ellipsizemode props defines how text will be truncated. in my case, i want to show a expand button instead of ellipsis glyph, and i could expand the text to show all of them by press the button.
so i want to figure out how numberOfLines actually works in Text component in react-native. then i could archive this, anyone could help?
It will show your content in <Text> component which is fitted in those numberOfLines.
With output you are expecting or want to perform, you can use dynamic numberOfLines using state.
Just have that state variable default value of lineNumbers and change it when pressing on button or any other component.
this.state = {
lineNumbers: 2
}
This indicates your numberOfLines will be default 2, and once user press on button or read more
this.setState({lineNumbers: null})
It will show whole content.
<Text numberOfLines={this.state.lineNumbers}>
How can I remove default toolbar and add a custom toolbar as per my requirements and not get the default Save button with Floppy Disk in SimpleForm?
I am able to style the buttons and remove the icons on the toolbar but not able to proceed further as I am new to react-admin.
As mentioned in the documentation : React-Admin Toolbar, you can always override the default layout of the toolbar with toolbar={<CustomToolbarComponent />} props in the SimpleForm component.
As for disabling the toolbar altogether, you can use toolbar={false} in SimpleForm and that would remove it.
You can also let toolbar be false, and maybe add the CustomToolbarComponent inside the SimpleForm component.
Something like :
<SimpleForm toolbar={false}>
<FormComponent1 />
<FormComponent2 />
<CustomToolbarComponent />
</SimpleForm>
As someone who was new to react-admin a few weeks ago too, please read the documentation thouroughly and their code and play with it, you'll come across the solution.
How can I remove the background of search bar ? I tried by changing background color but it also changes cancel button's color !!!
Thanks...
The best alternative to this is creating a custom search bar with Ti.UI.textField and Ti.UI.button. Add them both to a view and customize it as you please. Finally, just add an event listener to the button click, and voila!
Take a look at this Module: https://github.com/viezel/NappUI
It extends the properties for several UI Elements, including SearchBar, here is the list.
SearchField BackgroundImage
Custom Cancel button
barColor - background gradient of the button. (similar to navbar)
color - color of the button title
title - change the default Cancel text
font - set the font of the button
Appearance of the keyboard
Disable the search icon
To install it, I recommend you to use the new gitTio command line, this will automatically download the module, install it on the modules folder on Application Support folder and add the proper config line on tiapp.xml.
gittio install -g dk.napp.ui
And here is an example of a SearchBar using the new properties enabled by this Module
var searchBar = Ti.UI.createSearchBar({
searchFieldBackgroundImage:"searchbg.png",
showsScopeBar:true,
scopeButtonTitles:["hello", "yes"],
customCancel:{
barColor:"#333",
color:"#ddd",
title:"Hit me",
font:{
fontSize:16,
fontWeight:"bold",
fontFamily:"Georgia"
}
},
appearance:Titanium.UI.KEYBOARD_APPEARANCE_ALERT,
barColor:"transparent",
disableSearchIcon:true //disables the search icon in the left side
});
If you are talking about the gradient blue, I removed it on my app with:
var searchBox = Ti.UI.createSearchBar({
barColor: '#eee'
});
Hope this helps.
Unfortunately 'barColor' doesn't work. Ti seems to change the color by changing the opacity or hue or something. DannyM's workaround is the best.
I must have wasted a zillion hours making sense of Titanium's background colors, background images, bar colors and their active/inactive cousins.
Conclusion: "Free" software is costly if you count the time you waste on silly bugs and lack of useful documentation.