Hello i'm trying to change background color of multiselect dropdown in react native. There is no attribute to change color in list.
Here is my code :
<MultiSelect
hideTags
style={{backgroundColor:'rgba(52, 52, 52, 0.1)',color:'#d1d0cf'}}
items={this.state.serviceCategories}
uniqueKey="id"
ref={(component) => { this.multiSelect = component }}
onSelectedItemsChange={selectedCategory => this.setState({ selectedCategory })}
selectedItems={this.state.selectedCategory}
selectText="Pick Items"
searchInputPlaceholderText="Search Items..."
onChangeInput={ (text)=> console.log(text)}
altFontFamily="ProximaNova-Light"
tagRemoveIconColor="#CCC"
tagBorderColor="#CCC"
tagTextColor="#CCC"
selectedItemTextColor="#f673d7"
selectedItemIconColor="#f673d7"
itemTextColor="#d1d0cf"
displayKey="name"
searchInputStyle={{ backgroundColor:'rgba(52, 52, 52, 0.1)',color:'#d1d0cf' }}
submitButtonColor="#f673d7"
submitButtonText="Submit"
/>
It is already submitted in issues of that library unable to change multiselect background color
So now you have 2 options.
Either wait for someone to do that task and update the library
Or you yourself do some changes in library, add backgroundcolor parameter and generate PR.
If it is not urgent for you, let me generate PR for you tonight, and than you can use that in your project.
Related
I want to change the fill colour on a single element in a lottie.json file conditionally. How can I access the fill of 'circle' and update the colour?
I currently have this
<LottieView
source={require('../assets/splash_logo_2.json')}
autoPlay
loop={false}
onAnimationFinish={() => {
progress.value = 1;
}}
colorFilters={[
{
keypath: 'circle',
color: progress.value === 1 ? '#85AA82' : '#B5FFAF',
},
]}
/>
Check this answer:
How do I use ColorFilter with React-Native-Lottie?
and also this tool to help you to identify it better:
https://colorize-react-native-lottie.netlify.app/
I'm trying to throw together a simple phone app mockup using React Native & React Native Elements as a set of UI components. I want to set the styling of various elements to a common theme, so I'm following the example in the documentation: https://reactnativeelements.com/docs/customization#using-themeprovider.
But the trouble with the example there (as it says in the docs), it sets the style of all buttons. What I'd like to do is to set the background colour of only the solid buttons for example, leaving the clear buttons, clear! Can anyone point me in the right direction of how to do this?
Current snippet (trimmed to save space):
const myTheme = {
Button: {
buttonStyle: {
borderRadius: 4,
backgroundColor: '#03E0EE',
},
titleStyle: {
color: '#180D43',
},
},
};
...
<ThemeProvider theme={myTheme}>
<View style={styles.footerContainer}>
<Button title="Primary Button"/>
<Button title="Secondary Button" type="clear" />
</View>
</ThemeProvider>
Create a wrapper component for SolidButton and or ClearButton. Make this wrapper components consuming the myTheme context with style props (e.g. ButtonSolid\ButtonClear). AFAIK there are no selector capabilities like in css.
Using DefaultButton currently. This remains selected when clicked, which property can be used to revoke selection once clicked.
Alternatively, is there any styling that needs to be done for selection?
You can use DefaultButton checked property for that scenario and control it with onClick event:
const [isButtonChecked, setIsButtonChecked] = React.useState(false);
<DefaultButton
checked={isButtonChecked}
onClick={() => {
setIsButtonChecked(!isButtonChecked);
}}
styles={{
rootChecked: {
backgroundColor: '#f00',
color: '#fff',
}
}}
>
Default Button
</DefaultButton>
Use styles property to modify button styles when button state is checked: rootChecked, rootCheckedHovered etc.
Codepen example.
The react-native-paper docs suggest you can set the color of a disabled button using a theme, but this code does not work:
export const buttonTheme = {
colors: {
primary: COL_BASE_YELLOW,
disabled: COL_DARK_HIGHLIGHT,
},
}
<Button
loading={submittedPhoneNumber ? true : false}
mode="contained"
onPress={() => handleSubmitPhoneNumber(phoneNumber)}
theme={buttonTheme}
disabled={phoneNumber.length < 5 ? true : false}>
Continue
</Button>
The primary color works however.
How do I change the color of the button when it is disabled?
Don't use disabled props, it will always make your button grey, if you want to use your desired colour for disabled mode, do it like this :
<Button
loading={submittedPhoneNumber ? true : false}
mode="contained"
onPress={phoneNumber.length < 5 ? () => {} : () => handleSubmitPhoneNumber(phoneNumber)}
color={phoneNumber.length < 5 ? 'darkerColor' : 'fadedColor'}>
Continue
</Button>
From this Github issue:
The text if the contained button depends on the background color of
the button, which is automatically determined based on of the
background color is light it dark. Wherever theme is dark or not
doesn't affect it.
This is the desired behavior. We don't want to show white text on a
light background because you have a dark theme, otherwise the text
won't have enough contrast and will be illegible.
Changing the theme to dark changes the disabled button color, as I tested. Apart from this, I don't think its possible if you use react-native-paper. The author has decided to automatically set the color & background color of the button based on something, but his language is unclear.
However, you can give a labelStyle prop the button directly, and you could have a conditional in that style.
<Button labelStyle={{ color: phoneNumber.length < 5 ? 'red' : 'green' }}>
or,
[buttonDisabled, setButtonDisabled] = useState(false); // put this outside the render function.
<Button disabled={disabled} labelStyle={{ color: disabled ? 'red' : 'green' }}>
I'm may be late but here's my solution:
<Button
id="save-phonenumber"
color="darkColor">
onClick={doSomething}
disabled={phoneNumber.length < 5 ? true : false}>
<Button/>
In you Css file you can add
Button#save-phonenumber[disabled] {
background: "fadedColor"
}
Benefit of using this approach is that you don't additionally need to disable the clicking effect when the button is disabled.
If you're caring about light and dark themes at the moment, then you can achieve your goal like this -
I would suggest creating your own Button Component on the top of Paper Button.
// extending default Paper Button Component
<PaperButton style={[ props.disabled && { backgroundColor: 'cccccc' } ]}>
{children}
</PaperButton>
// Using component...
<MyButton disabled={disabled}>
Click Me!
</MyButton>
How can I replace the circle checkbox of a DetailsList in office-ui-fabric-react with a normal square CheckBox component? I see onRenderCheckbox so I try something like this:
onRenderCheckbox={(props) => (<Checkbox checked={props.checked} />)}
or
onRenderCheckbox={(props) => (<Checkbox {...props} />)}
I can see the square checkbox but I can't select it.
What it the proper way to do this?
Thanks in advance...
When you render the Checkbox component, it handles the click itself (and thus it won't percolate up to the row so it can toggle selection accordingly), so you need to prevent it with the pointer-events: none style.
onRenderCheckbox(props) {
return (
<div style={{ pointerEvents: 'none' }}>
<Checkbox checked={props.checked} />
</div>
);
}
Check it out here: https://codepen.io/anon/pen/zQXEPr